使用 JavaScript 刪除 HTML 元素

Tahseen Tauseef 2023年1月30日 2022年5月10日
  1. JavaScript 中的元素是什麼
  2. HTML 元素中的兩種標籤
  3. 在 JavaScript 中如何新增元素
  4. 在 JavaScript 中如何刪除元素
使用 JavaScript 刪除 HTML 元素

本教程文章將討論 JavaScript 中的元素、如何在 JavaScript 中新增元素以及如何在 JavaScript 中刪除現有元素。

本文將解決以下問題:

  • JavaScript 中的元素是什麼
  • 如何在 JavaScript 中新增元素
  • 如何在 JavaScript 中刪除元素

JavaScript 中的元素是什麼

JavaScript 元素是 HTML 文件中的一個節點。HTML 元素使用標籤顯示。

HTML 元素中的兩種標籤

標籤用於將 HTML 元素新增到文件中。有兩種型別的標籤:

  • 雙標籤由開始標籤和結束標籤組成。
<div>
    Some Content here
</div>
注意
<div> 代表開始標籤,</div> 代表結束標籤。
  • 自閉標籤是單個標籤。沒有單獨的開始和結束標籤。
<img src="SomeLinkHere" alt="" />

在 JavaScript 中如何新增元素

可以使用 JavaScript 將新的 HTML 元素插入到 Document 物件模型中。

為此,我們需要在文件上建立一個新元素,然後為其建立一個文字節點(如果需要)將其附加到建立的元素中。

最後,將建立的元素附加到文件物件模型中已經存在的元素中。

<div id="main">
  <p id="paragraphOne">This is the First paragraph.</p>
  <p id="paragraphTwo">This is the Second paragraph.</p>
</div>

<script>
const ThirdParagraph = document.createElement("p");
ThirdParagraph.id = "paragraphThree";
const TextNode = document.createTextNode("This is the Third paragraph.");
ThirdParagraph.appendChild(TextNode);

const newElement = document.getElementById("main");
newElement.appendChild(ThirdParagraph);
</script> 

id 為 main 的主容器有兩個段落,分別是 paragraphOneparagraphTwo

在文件上建立了一個新的段落元素,並且一個名為 paragraphThree 的 ID 已附加到 JavaScript。

此外,還建立了一個文字節點並將其附加到段落元素。ThirdParagraph 將被新增到 main 元素中。

<div id="main">
  <p id="paragraphOne">This is the First paragraph.</p>
  <p id="paragraphTwo">This is the Second paragraph.</p>
  <p id="paragraphThree">This is the Third paragraph.</p>
</div>

輸出。請參閱工作程式碼段。

可以使用 JavaScript 庫(例如 jQuery)重複相同的過程。

要使用 jQuery 將新元素新增到 DOM 中,你將訪問要新增元素的容器並使用 append 關鍵字將其新增到容器中,即

<div id="main">
  <p id="paragraphOne">This is the First paragraph.</p>
  <p id="paragraphTwo">This is the Second paragraph.</p>
</div>

<script>
	$("#main").append("<p id='paragraphThree'>This is the Third paragraph.</p>");
</script> 

上面提到的程式碼的輸出可以通過這個連結看到。

在 JavaScript 中如何刪除元素

要從文件物件模型中移除元素,你需要訪問該元素並將其移除。

<div id="main">
  <p id="paragraphOne">This is the First paragraph.</p>
  <p id="paragraphTwo">This is the Second paragraph.</p>
</div>

<script>
  var SecondPara = document.getElementById("paragraphTwo");
  SecondPara.remove();
</script>

通過此連結可以看到程式碼段的輸出。

該元素由 id 訪問,並在其上呼叫元素的刪除函式,這會將其從 DOM 中刪除。

同樣的,上面的結果可以用 jQuery 來實現。

<div id="main">
  <p id="paragraphOne">This is the First paragraph.</p>
  <p id="paragraphTwo">This is the Second paragraph.</p>
</div>

<script>
  $("#paragraphTwo").remove();
</script>

相關文章 - JavaScript Element