ページの指定した位置にHTML要素を挿入するときは、下記の4種類のメソッドで挿入することができます
appendChild
指定した要素の中の最後に挿入する
Node: appendChild() メソッド - Web API | MDN
HTML
<div id="target">
<p>元々あるテキスト</p>
<p>追加テキスト</p>
</div>JavaScript
//追加したい要素
const element = document.createElement('p');
element.textContent = '追加テキスト';
//追加先の要素
const target = document.getElementById('target');
//指定した要素の中の最後に挿入
target.appendChild(element);before
指定した要素の前に挿入する
Element.before() - Web API | MDN
HTML
<p>追加テキスト</p>
<p id="target">元々あるテキスト</p>JavaScript
//追加したい要素
const element = document.createElement('p');
element.textContent = '追加テキスト';
//追加先の要素
const target = document.getElementById('target');
//指定した要素の前に挿入
target.before(element);after
指定した要素の後に挿入する
Element.after() - Web API | MDN
HTML
<p id="target">元々あるテキスト</p>
<p>追加テキスト</p>JavaScript
//追加したい要素
const element = document.createElement('p');
element.textContent = '追加テキスト';
//追加先の要素
const target = document.getElementById('target');
//指定した要素の前に挿入
target.after(element);insertBefore
指定した要素の中にある、第2パラメータで指定した子要素の前に挿入する。
※第1パラメータに挿入するHTML要素、第2パラメータに子要素を指定します。
Node: insertBefore() メソッド - Web API | MDN
HTML
<div id="target">
<p>追加テキスト</p>
<p id="child">元々あるテキスト</p>
</div>Javascript
//追加したい要素
const element = document.createElement('p');
element.textContent = '追加テキスト';
//追加先の要素
const target = document.getElementById('target');
//追加先の要素の子要素
const child = document.getElementById('child');
target.insertBefore( element, child);insertBeforeメソッドはありますが、対になるinsertAfterメソッドはありませんのでご注意ください
