HTML DOM DD 对象


HTML DOM DD 对象与存在于 HTML 文档中由 <dl> 元素表示的定义列表内的 HTML <dd> 元素相关联。

语法

以下是语法 -

创建 DD 对象 −

var p = document.createElement("DD");

範例

我们通过 HTML DOM DD 对象的示例来了解一下 −

交互式实例

<!DOCTYPE html>
<html>
<body>
<h2>dd object example</h2>
<p>Click the button below to create a dd element with some text in it</p>
<button onclick="create_dd()">CREATE</button><br><br>
<dl id="DL1">
<dt>Mango</dt>
</dl>
<script>
   function create_dd() {
      var d = document.createElement("DD");
      var txt = document.createTextNode("Mango is called the king of fruits.");
      d.appendChild(txt);
      var ele= document.getElementById("DL1");
      ele.appendChild(d);
   }
</script>
</body>
</html>

输出

这会产生以下输出 −

单击创建按钮 −

在上述範例中 −

我们创建了一个 ID 为“DL1”的定义列表。其中有一个 <dt> 元素 −

<dl id="DL1">
<dt>Mango</dt>
</dl>

然后,我们创建了一个按钮创建,当用户单击该按钮,它会执行 create_dd() 方法 −

<button onclick="create_dd()">CREATE</button><br><br>

在 create_dd() 方法中,使用 document 对象上的 createElement() 方法创建了一个 <dd> 元素,并将其赋值给变量 d。然后,使用 createTextNode() 方法创建一个文本节点,并将其赋值给变量 txt。随后,使用 appendChild() 方法将文本节点追加为 <dd> 元素的子元素。

<dd> 元素连同文本节点随后又通过再次使用 appendChild() 方法追加为定义列表的子项−

function create_dd() {
   var d = document.createElement("DD");
   var txt = document.createTextNode("Mango is called the king of fruits.");
   d.appendChild(txt);
   var ele= document.getElementById("DL1");
   ele.appendChild(d);
}

更新日期:2021 年 2 月 20 日

91 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告