要素を追加する(insertBefore)
要素を追加する(insertBefore)
新しい要素をHTML文書に追加するにはinserBeforeメソッドを使用します。 例えば、createElemetnで作成した要素はまだどこにも所属していないので、そういう要素をinsertBeforeを使ってHTML要素に追加します。
var practice = document.getElementById('practice'); practice.innerHTML = '<h1>れんしゅう</h1>'; practice.style.backgroundColor = '#999999'; practice.style.fontSize = '30px'; practice.style.color = '#FFFFFF'; // 要素を追加します var first = document.createElement('div'); // setAttributeとは属性を指定するために使う first.setAttribute('id','first'); first.innerHTML = '<p>要素を追加</p>'; practice.insertBefore(first, null); // さらに要素を追加します var second = document.createElement('div'); second.setAttribute('id','second'); second.innerHTML = '<p>さらに要素を追加</p>'; practice.insertBefore(second, first);
参考教材
いちばんやさしいJavaScriptの教本 人気講師が教えるWebプログラミング入門