原生js实现给指定元素的后面追加内容
生活随笔
收集整理的這篇文章主要介紹了
原生js实现给指定元素的后面追加内容
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
參考鏈接：http://www.jb51.net/article/35412.htm
原生js實(shí)現(xiàn)給指定元素的后面追加內(nèi)容
var header1 = document.getElementById("header"); var p = document.createElement("p"); // 創(chuàng)建一個(gè)元素節(jié)點(diǎn) insertAfter(p,header1); // 因?yàn)閖s沒有直接追加到指定元素后面的方法 所以要自己創(chuàng)建一個(gè)方法 function insertAfter( newElement, targetElement ){ // newElement是要追加的元素 targetElement 是指定元素的位置 var parent = targetElement.parentNode; // 找到指定元素的父節(jié)點(diǎn) if( parent.lastChild == targetElement ){ // 判斷指定元素的是否是節(jié)點(diǎn)中的最后一個(gè)位置 如果是的話就直接使用appendChild方法 parent.appendChild( newElement, targetElement ); }else{ parent.insertBefore( newElement, targetElement.nextSibling ); }; };
自測(cè)實(shí)例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""></HEAD><BODY><div><ul id="fusu"><li>好雨知時(shí)節(jié)，</li><li>當(dāng)春乃發(fā)生。</li><li><span class="c-gap-right-small">隨風(fēng)潛入夜</span>,</li><li>潤物細(xì)無聲。</li></ul></div> <script language="javascript">var objUl = document.getElementById("fusu"); var objLen = objUl.children.length; var lastObj = objUl.children[objLen-1]; //alert(lastObj.innerHTML); var p = document.createElement("ol"); // 創(chuàng)建一個(gè)元素節(jié)點(diǎn) p.innerHTML = '<li>萬物生</li><li>荷塘月色</li>'; insertAfter(p,lastObj); // 因?yàn)閖s沒有直接追加到指定元素后面的方法 所以要自己創(chuàng)建一個(gè)方法 function insertAfter( newElement, targetElement ){ // newElement是要追加的元素 targetElement 是指定元素的位置 var parent = targetElement.parentNode; // 找到指定元素的父節(jié)點(diǎn) if( parent.lastChild == targetElement ){ // 判斷指定元素的是否是節(jié)點(diǎn)中的最后一個(gè)位置 如果是的話就直接使用appendChild方法 parent.appendChild( newElement, targetElement ); }else{ parent.insertBefore( newElement, targetElement.nextSibling ); }; }; </script></BODY> </HTML>運(yùn)行結(jié)果：
- 好雨知時(shí)節(jié)，
- 當(dāng)春乃發(fā)生。
- 隨風(fēng)潛入夜，
- 潤物細(xì)無聲。
- 萬物生
- 荷塘月色
總結(jié)
以上是生活随笔為你收集整理的原生js实现给指定元素的后面追加内容的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 20170824关于星光级和低照度你了解
- 下一篇： 百度seo排名点击器_SEO整站优化思路