Node.removeChild() Node.replaceChild() Node.appendChild() Node.insertBefore() Node.hasChildNodes() createElement()

createElement() 方法通過指定名稱創建一個元素

<div style="font-size: 20px;"> <pre>document.createElement() 創建一個元素。 例 : document.createElement("div") document.createElement("P") document.createElement("input") .......等等 Node.appendChild() 方法在節點的子節點列表末新增新的子節點。 Node.insertBefore() 方法在節點的子節點列表任意位置插入新的節點。 Node.removeChild() 方法從 DOM 移除一個子節點，並返回移除的節點。 Node.replaceChild() 實現子節點(對像)的替換。返回被替換對像的引用。 Node.hasChildNodes() 取得值，指出這個節點是否有子節點。 </pre> </div>

00

<h1>Node.appendChild( )</h1> <button onclick="myFunction()">Node.appendChild()</button> <div id="div1" >id="div1"</div> <script> function myFunction() { var newDiv = document.createElement("div"); var newContent = document.createTextNode("Hi there and greetings!"); newDiv.appendChild(newContent); // or newDiv.innerHTML = "Hi there and greetings!" document.body.appendChild(newDiv, div1); } </script> <style> #div1 , button , #DP {font-size: 18px;} h1 {font-size: 25px;color:blue;ont-weight:bold;text-align:center;} </style>

00

<h1>Node.insertBefore( )</h1> <button onclick="myFunction()">Node.insertBefore()</button> <div id="div1" >id="div1"</div> <script> function myFunction() { var newDiv = document.createElement("div"); var newContent = document.createTextNode("Hi there and greetings!"); newDiv.appendChild(newContent); var currentDiv = document.getElementById("div1"); document.body.insertBefore(newDiv, currentDiv); } </script> <style> #div1 , button , #DP {font-size: 18px;} h1 {font-size: 25px;color:blue;ont-weight:bold;text-align:center;} </style>

00

<h1>Node.replaceChild( )</h1> <button onclick="myFunction()">replaceChild()</button> <div id="div1" >id="div1"</div> <script> function myFunction() { var newDiv = document.createElement("div"); var newContent = document.createTextNode("Hi there and greetings!"); newDiv.appendChild(newContent); document.body.replaceChild(newDiv, div1); } </script> <style> #div1 ,button , #DP {font-size: 18px;} h1 {font-size: 25px;color:blue;ont-weight:bold;text-align:center;} </style> <style> #div1 button , #DP {font-size: 18px;} h1 {font-size: 25px;color:blue;ont-weight:bold;text-align:center;} </style>

00

<h1>Node.removeChild( ) / Node.hasChildNodes( ) / Node.hasChildNodes() </h1> <div id="div1" > <button onclick="div1.removeChild(this);DPD()">1 removeChild(this)</button> <button onclick="div1.removeChild(this);DPD()">2 removeChild(this)</button> <button onclick="div1.removeChild(this);DPD()">3 removeChild(this)</button> <button onclick="div1.removeChild(this);DPD()">4 removeChild(this)</button> </div> <div id="DP"></div> <script> function DPD() { var TxT = ""; TxT += 'div1.childNodes.length = ' + div1.childNodes.length; TxT += '<br> div1.hasChildNodes() = ' + div1.hasChildNodes() + "<br>" ; for(var x = 0 ; x < div1.childNodes.length ; x++){ TxT += '<br>' + div1.childNodes[x].nodeName; } DP.innerHTML= TxT; } DPD() ; </script> <style> #div1 button , #DP {font-size: 18px;} h1 {font-size: 25px;color:blue;ont-weight:bold;text-align:center;} </style>

00

<h1>Node.appendChild( )</h1> <button onclick="myFunction()">Node.appendChild()</button> <div id="div1" >id="div1"</div> <script> i=1; function myFunction() { var BR = document.createElement("br"); var newinput = document.createElement("input"); document.body.appendChild(BR, div1); document.body.appendChild(newinput, div1); newinput.value=i + " newinput"; i++; } </script> <style> #div1 , button , #DP {font-size: 18px;} h1 {font-size: 25px;color:blue;ont-weight:bold;text-align:center;} </style>

00

Edit