JavaScript(JS)/JQuery HTML DOM 元素 (節點)新增，編輯，刪除操作例項分析

資料來源:https://www.796t.com/article.php?id=15450

https://powerkaifu.github.io/2020/10/02/lesson-jq-03.insert-replace/

JavaScript(JS) H取得元素語法: document.getElementById / document.getElementsByName / document.getElementsByClassName

JavaScript(JS) HTML DOM 元素 (節點)新增，編輯，刪除操作。函數如下：

    createElement，createTextNode，appendChild，insertBefore，removeChild，replaceChild

▲createElement建立 <p> 元素:

    var para = document.createElement(“p”);
▲createTextNode為 <p> 元素新增文字節點：
    var node = document.createTextNode(“這是一個新的段落。”);
▲appendChild（它用於新增新元素到尾部）將文字節點新增到 <p> 元素中：
    para.appendChild(node);

Code:

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
<script>
var para = document.createElement("p"); //建立p標籤
var node = document.createTextNode("這是一個新的段落。"); //新增文字節點
para.appendChild(node); //向p標籤新增文字節點（內容）
var element = document.getElementById("div1");
element.appendChild(para); //新增到已存在的元素中
</script> 

▲insertBefore（新元素新增到開始位置）

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script>

▲removeChild 要移除一個元素，你需要知道該元素的父元素。

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

▲replaceChild 替換 HTML DOM 中的元素

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div> 
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個新的段落。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para,child);
</script>

jQuery – 插入、取代、刪除元素

▲before ()、prepend ()、append ()、after () 都是用來指定被插入至選擇目標某個位置的文件內容，皆取一個引數，可以是用來指定新內容的「純文字」或 「HTML 字串」，也可以是個「jQuery 物件」。

$('p').append('<span>P結束標籤前面</span>')
$('p').prepend('<span>p開始標籤後面</span>')
$('p').before('<span>p開始標籤前面</span>')
$('p').after('<span>p開始標籤後面</span>')

▲insertBefore ()、prependTo ()、appendTo ()、insertAfter () 則是反過來，指將選擇目標的內容插入至參數表示的哪個位置。

▲replaceWith () 取代元素

    replaceWith () 方法用指定的 HTML 內容或元素替換被選元素。
    replaceWith () 與 replaceAll () 作用相同。差異在於語法：內容和選擇器的位置，以及 replaceAll () 無法使用函數進行替換。

<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>
<script>
  // replaceWith()　以選擇器開始，指定要插入的內容
  $('div.second').replaceWith('<h2>New heading</h2>')

  // replaceAll()　反過來以建立內容開始，並插入指定的位置
  $('<h2>New heading</h2>').replaceAll('.inner')
</script>

▲clone() 複製元素

    clone () 複製出一份選取集合的副本（包含所有的後代子孫以及文字），如果想要將文件上的元素複製到新的位置，而非移動它們，必須先用 clone () 方法來複製它們的副本。
    clone () 會製作並回傳每個所選元素（連同這些元素的所有子元素）的副本。
    但是，回傳的 jQuery 物件中的元素尚未成為文件的一部分，要使用上面提到的的方法插入。

<a class="clone" href="http://www.google.com">Google</a>
<p class="box"></p>
<script>
  // 複製 a元素到 p
  let content = $('a.clone').clone()
  $('p.box').append(content)
</script>

▲empty()

    只有清空子元素，移除每個所選元素全部的子元素（包括文字節點），不會更動到所選元素本身。

// .hello 裡面的子元素及內容會被清空
$('.hello').empty()

▲remove()

    連同自己以及子孫元素都一併從 DOM 樹中移除，而且還會移除任何先前已繫結的事件處理器。
    remove () 通常不帶引數，並會移除 jQuery 物件中所有的元素。不過如果傳入一個引數，那個引數會被視為選擇器，當然，也可以使用 filter 來篩選。

// 可以指定要移除的對象
$('div').remove('.hello')
// 這種做法相當於使用 filter
$('div').filter('.hello').remove()

▲detach()

    detach () 就像 remove ()，但不會移除事件處理器與資料。仍會保留所有事件處理器，若只想暫時自文件中移除某些元素，之後還要放回去的話，detach () 會比較適合。
    會在記憶體中保留一份相同的複製資料。