使用 JavaScript 刪除 HTML 元素
Tahseen Tauseef
2023年1月30日
2022年5月10日
本教程文章將討論 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 的主容器有兩個段落，分別是 paragraphOne 和 paragraphTwo。
在文件上建立了一個新的段落元素，並且一個名為 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>