从创建的元素中通过获取元素_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