Help us understand the problem. What is going on with this article?

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>'

こんな感じです!

おわり

疲れたからおわり。
きまぐれで更新していきます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away