ParentNodeとは
ParentNodeとは子を持つNodeのメソッドやプロパティを持つインターフェイスです。
ノードの追加 prepend , append
<div id="box">
<div id="innerA">A</div>
<div id="innerB">B</div>
<div id="innerC">C</div>
</div>const innerB = document.getElementById('innerB');
const newX = document.createElement('div');
const textX = document.createTextNode('newX');
newX.appendChild(textX);
innerB.prepend(newX);
const newY = document.createElement('div');
const textY = document.createTextNode('newY');
newY.appendChild(textY);
innerB.append(newY);
console.log(document.getElementById('box').innerHTML);
// => " <div id="innerA">A</div> <div id="innerB"><div>newX</div>B<div>newY</div></div> <div id="innerC">C</div> "
ノードの差し替え
<div id="box">
<div id="innerA">A</div>
<div id="innerB">B</div>
<div id="innerC">C</div>
</div>const innerB = document.getElementById('innerB');
const nodes = new Array();
const newX = document.createElement('div');
const textX = document.createTextNode('newX');
newX.appendChild(textX);
nodes.push(newX);
const newY = document.createElement('div');
const textY = document.createTextNode('newY');
newY.appendChild(textY);
nodes.push(newY);
innerB.replaceChildren(...nodes);
console.log(document.getElementById('box').innerHTML);
// => " <div id="innerA">A</div> <div id="innerB"><div>newX</div><div>newY</div></div> <div id="innerC">C</div> "