Question

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

比如
<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

1. 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 为相对于目标函数的下一个元素节点。