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

<pre style="font-size : 20px;"> <T1>parentNode.replaceChild( newChild, oldChild ) newChild:它是必需的參數 : 插入的新節點。 oldChild:它是必需的參數 : 被新節點替換的節點。</T1> script: var Mid = document.getElementById("menu") // 取得外層容器 id var newChild = document.createElement("div") // 一個新節點 var oldChild = Mid.getElementsByTagName("li") // 計算替換節點個數 for (let i =oldChild.length-1 ; i >= 0 ; i--) { newChild = document.createElement("div") ; // 新 div newChild.innerHTML = "div "+(i+1) + (i+1) ; // 新 div 內容 menu.replaceChild(newChild , oldChild[i] ) ; } // 替換替換 </pre> <style>T1 {font-size: 25px ;color : blue; } </style>

00

<div style="font-size : 30px;">parentNode.replaceChild() li change to div</div> <div id="menu" style="font-size : 20px;"> <ol>ol 11</ol> <li>li 11</li> <ol>ol 22</ol> <li>li 22</li> <ol>ol 33</ol> <li>li 33</li> <ol>ol 44</ol> <li>li 44</li> <ol>ol 99</ol> </div> <input onclick="change( )" type="button" value="li change div" style="font-size : 20px;" /> <script> function change(){ var itl = {} ; var TxT = "" var Mid = document.getElementById("menu"); // 取得外層容器 id var newIT = document.createElement("div"); // 一個新節點 itl = Mid.getElementsByTagName("li"); // 計算有幾多需被替換節點替換 for (let i =itl.length-1 ; i >= 0 ; i--) { newIT = document.createElement("div"); newIT .innerHTML = "div " + (i+1) + "" + (i+1) ; menu.replaceChild(newIT , itl[i] ) ; } } </script>

00

Edit

#Node.removeChild() #Node.replaceChild() #Node.appendChild() #Node.insertBefore() #Node.hasChildNodes() #createElement() #節點替換子節點 #節點替換子節點 #移除的節點 #加的節點 #末尾創建和添加文本節點 #安插創建和添加文本節點 #判斷元素是否有子代