DOM - 创建带文本的元素节点

元素节点操作的方法

DOM不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点

我们分别来看一下：

1.write  //我们常用的document.write();

例如我们这有一个按钮，我们点击按钮想要浏览器中出现对应的文字

运行结果如下：

【注】但是我们可以看到这种方法它是会覆盖掉原有的所有样式

所以第一种方法我们并不支持使用

我们通过下面的方法来进行更改内容

2.clearElement();  //创建元素节点

格式：document.createElement( 标签名 );

运行结果如下：

当我们点击按钮时，会弹出对话框显示创建成功了

但是，我们来看一下源代码，并没有span这个标签，是因为我们只是创建了该节点

以上就只是创建节点

2.appendChild();  //插入

格式：parent.appendChild( newNode );

功能：将newNode插入到parent子节点的末尾

我们在div中先加上p和em标签，方便显示插入的标签节点位置：

运行结果如下：

当我们点击按钮以后，按F12看源码就会发现在em标签后多了一个span标签

以上两步就是创建、插入节点

但是span节点里面并没有文本，如果我们想在span插入文本就需要下面的属性了

3.createTextNode( );  //插入文本内容

格式：document.createTextNode( 文本 );

功能：创建一个文本节点

运行结果如下：

当我们点击按钮后，添加了文本内容，看源码可以看出是在span中添加的

以上三步就是创建、添加文本、插入节点

上面三步都是通过不同的节点来进行创建、添加和插入的

那我们想一下，为什么不能直接创建一个带文本的节点呢？

对于这个方法，我们只能去封装函数

运行结果如下：

可以看出，点击按钮几次，就添加了几个span标签，并且包含文本内容

★★★同样，我们不要忘了封装函数完了之后将它放在我们之前封装函数的tool.js文件中，方便以后的使用！

- 写作不易，大家多多关注，谢谢啦-

---web分享，分享的不只是web