<!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>
創建節點並插入HTML中
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。