JavaScript如何添加节点

醉折花枝作酒筹
Freigeben: 2023-01-05 16:09:27
Original
12850 Leute haben es durchsucht

JavaScript添加节点的方法:1、使用appendChild(),语法“父级节点.appendChild(要添加的节点)”;2、使用insertBefore(),语法“父级节点.insertBefore(要插入的节点,插入位置)”。

JavaScript如何添加节点

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

JS种添加节点一共有2种方法

1、appendChild()

把要添加的节点添加到指定父级里面的最后面,所以也叫追加

使用方式:父级节点.appendChild( 要添加的节点 )

代码:

document.onclick = function(){ oDiv2.appendChild(oB2);//将b2追加到div2里面的最后面 }
Nach dem Login kopieren

图示:

70088G1DGSO{OSB}E`_{8NW.png

2、insertBefore()

把要插入的节点添加到指定父级里面的指定节点之前

使用方式:父级节点.insertBefore( 要插入的节点,指定节点 )

JS代码:(注:每执行一次新方法时,上一个方法都会被注释掉,为了易懂,此处注释一次,下面的文章中将不再把注释上一个方法的代码发上来)

document.onclick = function(){ //oDiv2.appendChild(oB2);此处将上一个方法注释 oDiv2.insertBefore(oB2,oSpan2);//将b2插入到div2中的span2前面 }
Nach dem Login kopieren
图示:

2$J}$BV%0)(T]86IWUA5FCR.png

所有浏览器都支持此方法,但是值得注意的是,如果第二个参数节点不存在,在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中,而其他主流浏览器(Firefox、Chrome、Opera等)下会报错,所以在插入节点的时候,需要先判断第二个参数节点是否存在

【推荐学习:javascript高级教程

Das obige ist der detaillierte Inhalt vonJavaScript如何添加节点. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!