码迷,mamicode.com
首页 > 编程语言 > 详细

记录javascript insertAdjacet系列方法

时间:2016-01-03 00:20:02      阅读:679      评论:0      收藏:0      [点我收藏+]

标签:

添加元素原来还有insertAdjacent这种方法。insertAdjacentHTML(sWhere,html),insertAdjacentText(sWhere,text),insertAdjacentElement(sWhere,element)

这是ie弄出来的 所以ie基本支持,

chrome(47.0.2526.106 m) 对三个方法都支持

测试ff(40.0.3)不支持 insertAdjacentElement方法

sWhere的取值有beforeBegin,beforeEnd,afterBegin,afterEnd 

区别如下

<body>
<div id="tag">tag</div>
<script>
    var el = document.getElementById("tag");
  el.insertAdjacentHTML("beforeBegin", "<div>beforeBegin html</div>")
  el.insertAdjacentHTML("beforeEnd", "<div>beforeEnd html</div>")
  el.insertAdjacentHTML("afterBegin", "<div>afterBegin html</div>")
  el.insertAdjacentHTML("afterEnd", "<div>afterEnd html</div>")

  el.insertAdjacentText("beforeBegin", "beforeBegin text")
  el.insertAdjacentText("beforeEnd", "beforeEnd text")
  el.insertAdjacentText("afterBegin", "afterBegin text")
  el.insertAdjacentText("afterEnd", "afterEnd text")
   el.insertAdjacentElement(beforeBegin, document.createElement(div)) 
</script>

</body>

运行后结果

<body>
<div>beforeBegin html</div>
beforeBegin text
<div></div>
<div id="tag">
    afterBegin text
    <div>afterBegin html</div>
    tag
    <div>beforeEnd html</div>
    beforeEnd text
</div>
afterEnd text
<div>afterEnd html</div>
<script>
    var el = document.getElementById("tag");
    el.insertAdjacentHTML("beforeBegin", "<div>beforeBegin html</div>")
    el.insertAdjacentHTML("beforeEnd", "<div>beforeEnd html</div>")
    el.insertAdjacentHTML("afterBegin", "<div>afterBegin html</div>")
    el.insertAdjacentHTML("afterEnd", "<div>afterEnd html</div>")

    el.insertAdjacentText("beforeBegin", "beforeBegin text")
    el.insertAdjacentText("beforeEnd", "beforeEnd text")
    el.insertAdjacentText("afterBegin", "afterBegin text")
    el.insertAdjacentText("afterEnd", "afterEnd text")

    el.insertAdjacentElement(beforeBegin, document.createElement(div))
</script>

 

记录javascript insertAdjacet系列方法

标签:

原文地址:http://www.cnblogs.com/xyz327/p/5095404.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!