<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>创建元素并插入HTML中</title>
<script type="text/javascript">
function innerHtmlInsert(){
document.getElementById("myDiv").innerHTML ="<div id='div2'>hello world</div>";
}
function createNewElement(){
var newNode = document.createElement("div");//创建一个div标签
newNode.textContent = "hello world!!!!!!!!!";//为新元素设置文本内容
newNode.setAttribute("id","div22222");//为新元素添加属性名和属性值
newNode.setAttribute("class","myClass1");//为新元素添加属性名和属性值
document.getElementById("myDiv").appendChild(newNode);//像父元素(div)的内部的末尾追加新元素(newNode)
}
function createNewElement2(){
var newNode = document.createElement("div");//创建一个div标签
newNode.textContent = "hello world!!!!!!!!!";//为新元素设置文本内容
var parentDiv = document.getElementById("myDiv");//body中的div赋值parentDiv
parentDiv.insertBefore(newNode,parentDiv.childNodes[0]);//像父元素的第一个子节点之前插入新元素
}
</script>
</head>
<body>
<input type="button" value="innerHTML插入元素" onclick="innerHtmlInsert();">
<input type="button" value="createElement,append插入元素" onclick="createNewElement();">
<input type="button" value="createElement,insert前部插入元素" onclick="createNewElement2();">
<div id="myDiv">==========</div>
</body>
</html>