JS DOM createTextNode()创建文本节点

createTextNode()方法

JavaScript DOM中，如果只是单单使用createElement()方法，比如创建一个p元素，则一般情况下，只能创建一个p元素节点，里头并不会显示文本，而是需要通过createTextNode()方法来添加一个文本节点，并通过appendChild()方法（当然，也可以通过其它的方法），将其添加给之前创建的p元素节点，具体可见下方的实例。

语法

document.createTextNode('value')

提示：value为文本节点的文本，自定义的内容。

createTextNode()方法实例代码，及在线编辑器

实例中设置了两个按钮，分步骤创建p元素节点，和p元素内部的文本节点，可以尝试按不同的先后顺序点击按钮，不过在选择不同顺序点击之前，先重新在线运行一下实例，然后点击按钮，看看变化的地方在哪里：

<div id='d'></div>

<button onclick='createP()'>创建p元素节点</button>
<button onclick='createT()'>创建文本节点</button>

<script>
  function createP(){
    var d = document.getElementById('d');
    var p = document.createElement('p');
    p.id = "p";
    p.style.color = "skyblue";
    d.appendChild(p)
  }
  
  function createT(){
    var p = document.getElementById('p');
    var t = document.createTextNode('这是文本节点');
    p.appendChild(t)
  }
</script>

hot：热门