資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 JavaScript 中向 HTML DOM 新增新元素？
在本文中，我們將討論如何在 JavaScript 中向 HTML DOM 新增新元素。
該 文件物件 提供了一個方法 createElement() 來建立元素，以及 appendChild() 方法 來將其新增到 HTML DOM。以下是建立 HTML DOM 的步驟：
步驟 1 - 要將元素插入 HTML DOM，首先，我們需要建立一個元素並將其附加到 HTML DOM。document.createElement() 用於建立 HTML 元素。建立元素的語法如下所示。
document.createElement(tagName[, options]);
其中，
tagName 是要建立的標籤的名稱。標籤型別為 <p>。
options 引數是一個可選的元素物件。
步驟 2 - 建立標籤後，我們需要建立文字並將其分配給標籤。建立文字節點的語法如下所示。
Document.createTextNode("String");
步驟 3 - 建立文字後，我們需要將文字新增到 <p> 型別元素中，最終新增到 div 標籤中。將元素附加到標籤的語法如下所示。
appendChild(parameter);
示例 1
在下面的示例中，最初 div 部分僅包含 2 個文字。但隨後，建立了一個文字並將其新增到 div 部分，如輸出所示。
<html>
<body>
<div id="new">
<p id="p1">Tutorix</p>
<p id="p2">Tutorialspoint</p>
</div>
<script>
var tag = document.createElement("p");
var text = document.createTextNode("Tutorix is the best e-learning platform");
tag.appendChild(text);
var element = document.getElementById("new");
element.appendChild(tag);
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
示例 2
以下是如何向 HTML DOM 新增元素的示例程式。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>How to add a new element to HTML DOM</p>
<div id="div1">
<p id="p1">Introduction.</p>
<p id="p2">Conclusion.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("The end.");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p2");
element.appendChild(para,child);
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
示例 3
以下是如何向 HTML DOM 新增元素的示例程式。這裡，使用了 insertBefore() 方法 而不是 append 方法來將元素新增到 div 標籤。
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>How to add a new element to HTML DOM</p>
<div id="div1">
<p id="p1">Introduction.</p>
<p id="p2">Conclusion.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("To begin with...");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p2");
element.insertBefore(para,child);
</script>
</body>
</html>
執行上述程式碼後，將生成以下輸出。
更新於：2023年9月2日
73K+ 次瀏覽
廣告