技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

要素を追加する(insertBefore)

要素を追加する(insertBefore)

新しい要素をHTML文書に追加するにはinserBeforeメソッドを使用します。 例えば、createElemetnで作成した要素はまだどこにも所属していないので、そういう要素をinsertBeforeを使ってHTML要素に追加します。

f:id:lhiroki1205:20190211162838j:plain

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);

f:id:lhiroki1205:20190211163745j:plain

参考教材

いちばんやさしいJavaScriptの教本 人気講師が教えるWebプログラミング入門