javaScript|生のJavaScriptで要素の作成・追加をする
スポンサーリンク
jQueryとかを使わないで、要素を作成したり追加したりする方法をメモ
要素を作成
createElement()で新しく要素を作成できます。
var p = document.createElement('p'); p.textContent = 'こんにちは!';
これで <p>こんにちは!</p> の要素が作られます。
最後の位置に子要素として追加
appendChild()で最後の位置に子要素として追加できます。
※addElementには、追加したい要素が入っているとしています。
element.appendChild(addElement);
最初の位置に子要素として追加
※addElementには、追加したい要素が入っているとしています。
element.insertBefore(addElement, element.firstChild);
指定した要素の直前に追加
※addElementには、追加したい要素が入っているとしています。
親要素の子要素として指定要素の前に追加しています。
element.parentNode.insertBefore(addElement, element);
指定した要素の直後に追加
※addElementには、追加したい要素が入っているとしています。
親要素の子要素として指定要素の後に追加しています。
element.parentNode.insertBefore(addElement, element.nextSibling);
更新日:2018年08月26日
作成日:2018年07月18日