jQuery での DOM 操作

jQuery での DOM 操作のメモ。

以下の DOM に対して追加・削除等の操作を行います。

  <div id="d1">
    <div id="d2-1">
      <div id="d3-1">
        <p id="p4-1">p4-1 text</p>
        <p id="p4-2">p4-2 text</p>
      </div>
      <div id="d3-2"></div>
    </div>
    <div id="d2-2">
      <div id="d3-3"></div>
      <div id="d3-4"></div>
      </div>
    </div>
  </div>

■末尾に追加

  $(`<div id="d2-3"></div>`).appendTo($('#d1'));
  console.log($('#d1').html());
-->
    <div id="d2-1">
      <div id="d3-1">
        <p id="p4-1">p4-1 text</p>
        <p id="p4-2">p4-2 text</p>
      </div>
      <div id="d3-2"></div>
    </div>
    <div id="d2-2">
      <div id="d3-3"></div>
      <div id="d3-4"></div>
      </div>
    <div id="d2-3"></div>

■指定要素の前に子を追加

  $(`<div id="d2-0"></div>`).insertBefore($('#d2-1'));
  console.log($('#d1').html());
-->
    <div id="d2-0"></div><div id="d2-1">
      <div id="d3-1">
        <p id="p4-1">p4-1 text</p>
        <p id="p4-2">p4-2 text</p>
      </div>
      <div id="d3-2"></div>
    </div>
    <div id="d2-2">
      <div id="d3-3"></div>
      <div id="d3-4"></div>
      </div>

■指定要素の次に子を追加
<pre>
$(`<div id="d3-5"></div>`).insertAfter($('#d3-4'));
console.log($('#d1').html());
-->
<div id="d2-1">
<div id="d3-1">
<p id="p4-1">p4-1 text</p>
<p id="p4-2">p4-2 text</p>
</div>
<div id="d3-2"></div>
</div>
<div id="d2-2">
<div id="d3-3"></div>
<div id="d3-4"></div><div id="d3-5"></div>
</div>

■指定要素を削除

  $('#d3-1').remove();
  console.log($('#d1').html());
-->
    <div id="d2-1">
      
      <div id="d3-2"></div>
    </div>
    <div id="d2-2">
      <div id="d3-3"></div>
      <div id="d3-4"></div>
      </div>

■指定要素の子を削除（空にする）

  $('#d3-1').empty();
  console.log($('#d1').html());
-->
    <div id="d2-1">
      <div id="d3-1"></div>
      <div id="d3-2"></div>
    </div>
    <div id="d2-2">
      <div id="d3-3"></div>
      <div id="d3-4"></div>
      </div>

■繰り返し

  $('#d3-1').children().each((i, node) => {
    console.log($(node).text());
  });
-->
p4-1 text
p4-2 text