HTML DOM DT 物件
HTML DOM DT 物件與 HTML <dt> 元素相關。使用 DT 物件,我們可以使用 JavaScript 動態建立 <dt> 元素。
語法
以下是語法 −
建立 DT 物件 −
var p = document.createElement("DT");例子
讓我們看一個關於 HTML DOM DT 物件的例子 −
<!DOCTYPE html>
<html>
<body>
<h2>DT object example</h2>
<p>Create a DT element inside a DL by clicking the below button</p>
<button onclick="createDT()">CREATE</button>
<script>
function createDT() {
var Desc = document.createElement("DL");
var DesT = document.createElement("DT");
var tn= document.createTextNode("Mango");
DesT.appendChild(tn);
var data = document.createElement("DD");
var tn1 = document.createTextNode("Mango is the king of fruits");
data.appendChild(tn1);
document.body.appendChild(Desc);
Desc.appendChild(DesT);
Desc.appendChild(data);
}
</script>
</body>
</html>輸出
它將產生以下輸出 −

點選 CREATE 按鈕 −

在上面的例子中 −
我們首先建立了一個 CREATE 按鈕,該按鈕將在使用者點選後執行 createDT() 方法 −
<button onclick="createDT()">CREATE</button>
createDT() 方法使用文件物件的 createElement() 方法建立一個 <dl>、<dt> 和 <dd> 元素,並將這些元素分別分配給 Desc、DesT 和 data 變數。然後,我們使用 createTextNode() 方法為 <dt> 和 <dd> 元素建立文字節點,並使用 appendChild() 方法將它們附加到各個元素中。
最後,我們將 <dt> 元素追加到 <dl>,然後追加 <dd> 元素。接著,使用 appendChild() 方法將 <dl> 元素與 <dt> 和 <dd> 元素一起追加到文件正文中 −
function createDT() {
var Desc = document.createElement("DL");
var DesT = document.createElement("DT");
var tn= document.createTextNode("Mango");
DesT.appendChild(tn);
var data = document.createElement("DD");
var tn1 = document.createTextNode("Mango is the king of fruits");
data.appendChild(tn1);
document.body.appendChild(Desc);
Desc.appendChild(DesT);
Desc.appendChild(data);
}
廣告
資料結構
網路
關係型資料庫
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP