参考链接：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. 荷塘月色

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

原生js追加html代码,原生js实现给指定元素的后面追加内容
复制代码代码如下: var header1 = document.getElementById("header"); var p = document.createElement ...
原生js快速查找指定元素
虽然已经很少有原生js写项目,不过有些组件任然使用js,原生js有一个非常麻烦的问题就是查找元素,写class怕准确度底,id总不不能写一大堆,又不想引用jquery className:id,cla ...
js list删除指定元素_删除js数组中的指定元素，有这两步就够了
js数组是js部分非常重要的知识,有时我们有这么个需求js数组删除指定元素,先定义一个函数来获取删除指定元素索引值,然后用js数组删除的方法,来删除指定元素即可,就两步不难,很简单. 1.JS的数组对 ...
html——原生js与jquery创建元素节点区别
学习完静态样式之后开始学习动态创建添加html元素,总结了下原生js与jquery生成元素区别. 1.javascript创建元素创建select var select = document.cre ...
JS数组删除指定下标元素 JS删除对象指定元素
一.JS数组删除指定下标元素 splice方法--Array.splice(index,n) 参数语义化理解:删除以下标index为起点的n个元素.(之后的元素会往前移动) 注意:splice会直接改 ...
js 数组删除指定元素
js 数组删除指定元素,js 数组并没有提供直接删除某一指定元素的方法,因此需要我们稍作处理思路:首先找到要删除的元素的位置,然后使用 splice 方法进行删除示例代码删除数组 s 中的 ' ...
[Js]删除数组指定元素
写在前面在最近的项目中,有用到js对数组的操作,之前自己几乎没有用到这种方法,这里就记录一下,算是对学到的东西的一种总结吧. 数组对象splice方法 splice() 方法向/从数组中添加/删除项 ...
原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
js list删除指定元素_vue.js
vue.js 中M V MV代表哪一部分 < 插值表达式(v-cloak v-text v-html v-bind(缩写是:) v-on(缩写是@) v-model v-for v-if v-s ...

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

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

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

最新文章

热门文章