HTML DOM DD 对象
htmlweb developmentfront end technology更新于 2024/6/1 17:16:17
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 按钮，当用户点击该按钮时，它将执行 create_dd() 方法 −
<button onclick="create_dd()">CREATE</button><br><br>
create_dd() 方法使用 document 对象上的 createElement() 方法创建一个 <dd> 元素，并将其赋值给变量 d。然后，它使用 createTextNode() 方法创建一个文本节点，并将其赋值给变量 txt。然后，使用 appendChild() 方法将该文本节点作为 <dd> 元素的子节点附加到该元素。
然后，再次使用 appendChild() 方法将 <dd> 元素及其文本节点附加到定义列表的子节点 −
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);
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
