js 怎么在标签对里面的最前面插入元素

Question

比如
<div>
<i id="a"></i>
<i id="b"></i>
<i id="c"></i>
</div>
这样一段代码，用js插入一个<i>标签，但是怎么插入到id="a"那个<i>的前面，如果使用appendChild()方法，只能插入到最后面。

Answer 1

js在标签最前面插入元素方法：

1、var divObj=document.createElement("div")。

2、//divObj.setAttribute('id','topAlert')。

3、divObj.innerHTML="测试js插入DOM和样式"

4、var first=document.body.firstChild;//得到页面的第一个元素。    

5、document.body.insertBefore(divObj,first);//在得到的第一个元素之前插入。

Answer 2

html部分，把"<p>我是一名优秀的学生</p>"插入到b元素前面
<div class="word">
   <b>我是一名老师</b>
</div>
2.js部分
<script type="text/javascript">
   $("<p>我是一名优秀的学生</p>").insertBefore($("b"));//通过insertBefore插入b前面
</script>

结果:

<div class="word">

<p>我是一名优秀的学生</p>
   <b>我是一名老师</b>
</div>

Answer 3

targetElement.parentNode.insertBefore( newElement, targetElement )
让目标元素的父母元素调用 insertBefore（） 方法， 将新元素插入到目标元素之前 。
另外，在JavaScript中并没有 insertAfter（） 方法(即插入目标函数之前)，但可以自定义实现:
function insertAfter(newElem,targetElem)｛
var parent = targetElem.parentNode;
if (parent.lastChild === targetElem) ｛
parent.appendChild( newElem ) ;
｝ else ｛
var nextElem = targetElem.nextSibling;
parent.insertBefore(newElem,nextElem);
｝
｝
其中
targetElement.parentNode为目标函数的父母元素；
targetElem.nextSibling 为相对于目标函数的下一个元素节点。