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);
}

更新於:20-2 月 2021

57 次瀏覽

開啟你的 職業生涯

透過完成課程來獲得認證

開始使用
廣告
© . All rights reserved.