JavaScript中元素建立的三種方式
阿新 • • 發佈：2018-12-11
目錄
1. document.write("標籤的程式碼及內容");
缺陷:如果是在頁面載入完畢後,此時通過這種方式建立元素,那麼頁面上存在的所有的內容全部被幹掉
<body> <input type="button" value="建立一個p" id="btn"/> 碼仙碼仙碼仙碼仙碼仙碼仙 <script> //document.write("標籤程式碼及內容"); document.getElementById("btn").onclick = function () { document.write("<p>這是一個p</p>"); }; </script> </body>
2. 物件.innerHTML="標籤及程式碼";
<head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 300px; height: 50px; border: 2px solid pink; } </style> </head> <body> <input type="button" value="建立一個p" id="btn"/> <div id="dv">這是div</div> 碼仙碼仙碼仙碼仙碼仙碼仙碼仙 <script> //點選按鈕,在div中建立一個p標籤 //物件.innerHTML="標籤程式碼及內容"; document.getElementById("btn").onclick = function () { document.getElementById("dv").innerHTML = "<p>天生我才必有用</p>"; }; </script> </body>
3. document.createElement("標籤的名字");
<head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 200px; height: 50px; border: 2px dashed pink; } </style> </head> <body> <input type="button" value="建立p" id="btn"/> <div id="dv"></div> <script> //建立元素 //document.createElement("標籤名字");物件 //把元素追加到父級元素中 //點選按鈕,在div中建立一個p document.getElementById("btn").onclick = function () { //建立元素的 var pObj = document.createElement("p"); pObj.innerText = "這是一個p"; //把建立後的子元素追加到父級元素中 document.getElementById("dv").appendChild(pObj); }; </script> </body>
4.只建立一個元素
1.有則刪除
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 200px;
height: 60px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<div id="dv"></div>
<script>
//先判斷有沒有, 有就刪除, 然後再建立
document.getElementById("btn").onclick = function () {
//判斷,div中有沒有這個按鈕,有就刪除
//判斷這個按鈕的子元素是否存在
if (document.getElementById("btn2")) {//如果為true就有
document.getElementById("dv").removeChild(document.getElementById("btn2"));
}
var obj = document.createElement("input");
obj.type = "button";
obj.value = "按鈕";
obj.id = "btn2";
document.getElementById("dv").appendChild(obj);
};
</script>
</body>
2.無則建立
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 200px;
height: 60px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<div id="dv"></div>
<script>
document.getElementById("btn").onclick = function () {
//判斷,div中有沒有這個按鈕,沒有就建立
//判斷這個按鈕的子元素是否存在
if (!document.getElementById("btn2")) {//如果為true就沒有
var obj = document.createElement("input");
obj.type = "button";
obj.value = "按鈕";
obj.id = "btn2";
document.getElementById("dv").appendChild(obj);
}
};
</script>
</body>
