详解JS中createTextNode方法创建文本节点并举例

作者:admin     字体:[增加 减小]    类型:原创
利用createElement方法可以创建Element节点,利用createTextNode方法可以创建文本节点,利用createComment可以创建注释节点,下面我们举例说明如何使用createTextNode创建文本节点,并利用appendChild插入节点。

创建Element节点可以使用Document对象的createElement()方法。创建Text节点可以使用Document对象的createTextNode()方法。同样还有createComment()方法创建注释,createDocumentFragment()方法创建文档片段。

下面举例说明document.createTextNode()方法的使用。

<html>
<head>
<title>从指定的URL,异步加载和执行脚本</title>
</head>
<body>
<div>
这里是一个div标签
<ul>
<li>无序列表第1行</li>
<li>无序列表第2行</li>
<li>无序列表第3行</li>
<li>无序列表第4行</li>
</ul>
<p>这里是一个p标签<span style="color:red;">这里是span标签</span></p>
</div>
<button id="btn">点击这这里执行</button>
</body>

<script>
//id标签可以直接使用
btn.onclick = function(){
var textnode = document.createTextNode("这里是新增内容");
var span = document.querySelector("span");
span.appendChild(textnode);
}
</script>
</html>

点击按钮前,浏览器中显示如下:

createTextNode方法示例

点击按钮执行代码之后,显示如下:

createTextNode方法示例执行代码后的结果