HTML DOM DFN 对象

htmlweb developmentfront end technology更新于 2024/5/18 8:44:17

HTML DOM DFN 对象与 HTML <dfn> 元素关联。<dfn> 元素内的文本是在周围上下文中定义的文本。DFN 对象代表 <dfn> 元素。

语法

以下是语法 −

创建 DFN 对象 −

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

示例

让我们来看一个 HTML DOM DFN 对象的示例 −

<!DOCTYPE html>
<html>
<body>
<h2>DFN object example</h2>
<p>Click the below button to create a dfn element with some text inside it.</p>
<button onclick="dfnCreate()">CREATE</button> <br><br>
<script>
   function dfnCreate() {
      var x = document.createElement("DFN");
      var t = document.createTextNode("The defination element");
      x.appendChild(t);
      document.body.appendChild(x);
   }
</script>
</body>
</html>

输出

这将产生以下输出 −

点击"创建"按钮 −

我们首先创建了一个"创建"按钮,当用户点击该按钮时,它将执行 dfnCreate() 函数 −

<button onclick="dfnCreate()">CREATE</button>

dfnCreate() 方法使用 document 对象的 createElement() 方法创建一个 <dfn> 元素。然后,它使用 createTextNode() 方法创建一个文本节点。该文本节点随后作为子节点附加到 <dfn> 元素。最后,使用 appendChild() 方法将 <dfn> 元素以及文本节点作为文档主体的子元素附加 −

function dfnCreate() {
   var x = document.createElement("DFN");
   var t = document.createTextNode("The definition element");
   x.appendChild(t);
   document.body.appendChild(x);
}

相关文章


有用资源