HTML DOM 代码对象
htmlweb developmentfront end technology更新于 2024/6/1 22:36:17
HTML DOM 代码对象与 HTML 5 <code> 标签关联。它用于将一段代码包裹在 <code> 元素内进行标记。代码对象本质上代表了 <code> 元素。
语法
以下是语法 −
创建代码对象 −
var a = document.createElement("CODE");
示例
让我们看一个 HTML DOM 代码对象的示例 −
<!DOCTYPE html>
<html>
<body>
<p>Click the below button to create a CODE element with some text</p>
<button onclick="createCode()">CREATE</button><br><br>
<script>
function createCode() {
var x = document.createElement("CODE");
var t = document.createTextNode("print('HELLO WORLD')");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html>
输出
这将产生以下输出 −
点击"CREATE"按钮时 −
在上面的例子中 −
我们创建了一个按钮 CREATE，当用户点击该按钮时，它将执行 createCode() 方法 −
<button onclick="createCode()">CREATE</button><br><br>
createCode() 方法创建一个 <code>使用 document 对象上的 createElement(“CODE”) 方法创建一个 <code> 元素。创建的元素被赋值给变量 x。然后，使用 document 对象上的 createTextNode() 方法创建一个包含文本的文本节点。使用变量 x 上的 appendChild() 方法，将此文本节点作为子节点附加到 <code> 元素。
然后，使用 appendChild() 方法将此 <code> 元素及其文本节点作为子节点附加到文档主体部分 −
function createCode() {
var x = document.createElement("CODE");
var t = document.createTextNode("print('HELLO WORLD')");
x.appendChild(t);
document.body.appendChild(x);
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
