原生js實現給指定元素的后面追加內容

 
var header1 = document.getElementById("header"); 
var p = document.createElement("p"); // 創建一個元素節點 
insertAfter(p,header1); // 因為js沒有直接追加到指定元素后面的方法 所以要自己創建一個方法 
function insertAfter( newElement, targetElement ){ // newElement是要追加的元素 targetElement 是指定元素的位置 var parent = targetElement.parentNode; // 找到指定元素的父節點 if( parent.lastChild == targetElement ){ // 判斷指定元素的是否是節點中的最后一個位置 如果是的話就直接使用appendChild方法 parent.appendChild( newElement, targetElement ); }else{ parent.insertBefore( newElement, targetElement.nextSibling ); }; 
};

自測實例：

<!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>好雨知時節，</li><li>當春乃發生。</li><li><span class="c-gap-right-small">隨風潛入夜</span>,</li><li>潤物細無聲。</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"); // 創建一個元素節點 
p.innerHTML = '<li>萬物生</li><li>荷塘月色</li>';
insertAfter(p,lastObj); // 因為js沒有直接追加到指定元素后面的方法 所以要自己創建一個方法 
function insertAfter( newElement, targetElement ){ // newElement是要追加的元素 targetElement 是指定元素的位置 var parent = targetElement.parentNode; // 找到指定元素的父節點 if( parent.lastChild == targetElement ){ // 判斷指定元素的是否是節點中的最后一個位置 如果是的話就直接使用appendChild方法 parent.appendChild( newElement, targetElement ); }else{ parent.insertBefore( newElement, targetElement.nextSibling ); }; 
}; </script></BODY>
</HTML>

運行結果：

好雨知時節，
當春乃發生。
隨風潛入夜，
潤物細無聲。
1. 萬物生
2. 荷塘月色

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/276200.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/276200.shtml
英文地址，請注明出處：http://en.pswp.cn/news/276200.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！