原生js实现给指定元素的后面追加内容

时间：2022-05-03 22:38:02

转载链接：http://www.jb51.net/article/35412.htm

原生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. 荷塘月色


标签：

相关文章