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