ChildNodeとは
ChildNodeとは親を持つNodeの共通のメソッドやプロパティです。
メソッド
ノードの削除
<div id="box">
<div id="innerA">A</div>
<div id="innerB">B</div>
<div id="innerC">C</div>
</div>const innerB = document.getElementById('innerB');
innerB.remove();
console.log(document.getElementById('box').innerHTML);
// => " <div id="innerA">A</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 newX = document.createElement('div');
const text = document.createTextNode('newX');
newX.appendChild(text);
innerB.before(newX);
innerB.after('newY');
console.log(document.getElementById('box').innerHTML);
// => " <div id="innerA">A</div> <div>newX</div><div id="innerB">B</div>newY <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 newX = document.createElement('div');
const text = document.createTextNode('newX');
newX.appendChild(text);
innerB.replaceWith(newX);
console.log(document.getElementById('box').innerHTML);
// => " <div id="innerA">A</div> <div>newX</div> <div id="innerC">C</div> "