原生js添加节点appendChild、insertBefore方式
更新时间：2023年10月25日 09:27:43 作者：LLL_LH
这篇文章主要介绍了原生js添加节点appendChild、insertBefore方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
原生js添加节点appendChild、insertBefore
1、createElement()
创建元素节点
var element=document.createElement(‘元素名');
2、crateTextNode()
创建文本节点
var txt=document.crateTextNode(‘文本内容');
3、createAttribute()
创建属性节点
var attr=document.createAttribute(‘属性名'); attr.value='属性值';
4、appendChild()
方法向节点添加最后一个子节点
如下：
<div id="box" class="classa">
<p id="p1">这是一个段落</p>
</div>
<script>
var box=document.getElementById("box");
var p2=document.createElement("p"); //创建元素节点
var txt=document.createTextNode("这是另一个段落"); //创建文本节点
p2.appendChild(txt); //把创建的文本节点追加到元素节点中
var attr=document.createAttribute("id"); //创建属性节点
attr.value="p2"; //给属性节点设置值
p2.setAttributeNode(attr); //给元素设置属性节点
box.appendChild(p2); //把创建的p元素追加到box最后
console.log(box);
</script>结果如下：
<div id="box" class="classa">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
5、insertBefore()
在指定的子节点之前插入新的子节点
parent.insertBefore(newChild,oldChild);
如下：
<div id="box">
<p id="p1">这是一个段落</p>
</div>
<script>
var box=document.getElementById("box");
var p1=document.getElementById("p1");
var p0=document.createElement("p");
var txt=document.createTextNode("这是一个段落");
p0.appendChild(txt);
box.insertBefore(p0,p1);
console.log(box);
</script>结果如下：
<div id="box">
<p>这是一个新段落</p>
<p id="p1">这是一个段落</p>
</div>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇JS 判断某变量是否为某数组中的一个值的3种方法(总结)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
今天，这篇文章将利用HTML，CSS，JS的知识编写一个童年经典游戏 - 推箱子，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2022-11-11
下面小编就为大家带来一篇模拟javascript中的sort排序(简单实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08![javascript中new Array()和var arr=[]用法区别](//img.jbzj.com/images/xgimg/bcimg3.png)
javascript中new Array()和var arr=[]用法区别
给大家分析一下在javascript中数组函数new Array()和var arr=[]用法区别，一起跟着学习一下吧。2017-12-12
OFFICE控件测试代码，主要是控制office的一些功能，需要的朋友可以参考下。2009-12-12
这篇文章主要介绍了利用JavaScript实现简单的网页时钟，主要使用了js的日期对象,实现的时候先创建一个日期对象，并进行网页布局,对时间获取之后将时间填入对应的标签内。然后使用多线程实现时钟的变动,需要的朋友可以参考一下2022-02-02
这篇文章主要介绍了JavaScript对JSON数组简单排序操作,结合实例形式分析了javascript使用sort()方法针对json数组元素排序的相关操作技巧与注意事项,需要的朋友可以参考下2019-01-01
这篇文章主要为大家详细介绍了Bootstrap基本布局实现方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
在Openlayers中,使用ol/sphere模块的getDistance函数可以计算两点间的大圆距离,绘制线路时,通过监听绘制事件和几何对象的变化,可实时更新距离,同时getLength函数帮助获取整条线路的长度,这些功能主要用于地理信息系统中的距离测量和地图制作2024-11-11
Promise.all() 方法接收一个 promise 的 iterable 类型的输入，并且只返回一个Promise实例，并且输入的所有 promise 的 resolve 回调的结果是一个数组，对async/await实现Promise.all()相关知识感兴趣的朋友一起看看吧2022-12-12
![javascript中new Array()和var arr=[]用法区别](http://img.jbzj.com/images/xgimg/bcimg3.png)
最新评论