关于insertAdjacentHTML的一些知识点

标签：

<div id="container">
　　<h2>hahah</h2>
　　<h3>quuquq</h3>
　　<div class="inner">hello</div>
　　<div class="inner">world</div>
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">

　　document.getElementById("container").insertAdjacentHTML("AfterEnd","<div>嘿嘿嘿</div>");
//在container后面添加
　　document.getElementById("container").insertAdjacentHTML("BeforeEnd","<div>哈哈哈</div>");
//在container元素的最后一个节点的后面；
　　document.getElementById("container").insertAdjacentHTML("afterBegin","<div>呜呜呜</div>");
//在container 元素的第一个节点前面添加
document.getElementById("container").insertAdjacentHTML("BeforeBegin","<div>啊啊啊</div>");
//在container 元素的前面添加
//js中获取元素内部的html
alert(document.getElementById("container").innerHTML);
//得到的结果是：
//<h2>hahah</h2>
// <div class="inner">hello</div>
// <div class="inner">world</div>

//添加节点
var ul = document.createElement("ul");
var li = document.createElement("li");
var text = document.createTextNode("hahha");
li.appendChild(text);
ul.appendChild(li);
document.getElementById("container").appendChild(ul);
//在元素之前添加
$(".inner").prepend("<br><a href=‘‘>test</a>");
//在元素后面添加
$(".inner").append("<br><a href=‘‘>text</a>");
//在元素之前插入
//$(".inner").insertBefore($("h3"));
$("h3").before($(".inner"));
//在元素之后插入
$("h2").after($(".inner"));

var ul = document.getElementsByTagName("ul")[0]; // assuming it exists
//· createDocumentFragment()：　　　　创建文档碎片节点
var docfrag = document.createDocumentFragment();
var browserList = ["Internet Explorer", "Firefox", "Safari",
"Chrome", "Opera"];

browserList.forEach(function(e) {
var li = document.createElement("li");
li.textContent = e;
docfrag.appendChild(li);
});

ul.appendChild(docfrag);
</script>
</html>

关于insertAdjacentHTML的一些知识点

标签：

原文地址：http://www.cnblogs.com/Super-Zhen-/p/5869710.html