Posted at

Javascriptでhtmlを動的に書き換える方法!

More than 1 year has passed since last update.


JavaScriptでHTMLを書き換えよう!


DOM(ドム)という仕組みを使うぜ!

いちばんやさしいJavaScriptの教本という本によると


DOMはHTML文書の構造を、オブジェクトをツリー状につなげた構造で表したものです。


へえ~~~

とりえず、ツリー状ってことはわかった!つぎ!


特定のIDをもつ要素を取得して書き換える

getElementByIdメソッドというものを使うらしい。

var test = document.GetElementById("idの値")

idの値っていうのは、HTMLの id=""の中の部分ね。

documentっていうのは、HTML全部っていう感じでとらえておいたらいいかな!

取得したHTML要素の内容は「innerHTML」で確認できるよ!

書き換えもできるらしい

test.innerHTML("書き換えたいなあ~") これで書き換え完了!

例えば


test.html

<div id="greet">おはよう!<div>



test.js

var greet = document.getElementById('greet')

greet.innerHTML = '<h1>こんにちは~~</h1>'

こんな感じです!


おわり

疲れたからおわり。

きまぐれで更新していきます。