createElement()

children 子元素 / parentElement 父元素

<pre><b>createElement() 創建元素</b> document.createElement() 創建一個元素。 例 : document.createElement("div") document.createElement("P") document.createElement("input") .......等等 document.createElement() 可以建立一個新的元素。 document.createTextNode() 就是用來建立文字節點的方法。 document.createDocumentFragment() 一開始我們有一個 HTML 的容器元素。 Node.appendChild() 方法在節點的子節點<r>列表末</r>新增新的子節點。 Node.insertBefore() 方法在節點的子節點列表任意位置<r>插入</r>新的節點。 Node.removeChild() 方法從 DOM 移除一個子節點，並返回<r>移除</r>的節點。 Node.replaceChild() 實現子節點(對像)的替換。返回被<r>替換</r>對像的引用。 Node.hasChildNodes() 取得值，指出這個節點<r>是否有子節點</r>。 </pre> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<b>Node.appendChild( )</b> <pre> <<c>script> function myFunction() { var newDiv = document.createElement("div"); var newContent = document.createTextNode("Hi"); newDiv.appendChild(newContent); <r>document.body</r>.appendChild(newDiv, div1); } </script></pre> <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"); newDiv.appendChild(newContent); document.body.appendChild(newDiv, div1); } </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<b>Node.appendChild( )</b> <pre> <<c>script> function myFunction() { var newDiv = document.createElement("div"); var newContent = document.createTextNode("Hi"); newDiv.appendChild(newContent); <r>div1</r>.appendChild(newDiv, div1); } </script></pre> <button onclick="myFunction()">Node.appendChild()</button> <div id="div1" ><<c>div id="<r>div1</r>"><<c>/div></div> <div id="div2" ><<c>div id="div2"><<c>/div></div> <script> function myFunction() { var newDiv = document.createElement("div"); var newContent = document.createTextNode("Hi"); newDiv.appendChild(newContent); div1.appendChild(newDiv, div1); } </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<b>Node.insertBefore()</b> <pre><<c>ul id="myList"> <<c>li>Coffee<<c>/li> <<c>li>Tea<<c>/li> <<c>/ul> <<c>script> function myFunction() { var newNode = document.createElement("li"); var textNode = document.createTextNode("Water"); newNode.appendChild(textNode); myList.insertBefore(newNode, myList.children[1]); } <<c>/script></pre> <button onclick="myFunction()">insertBefore()</button> <ul id="myList"> <li>Coffee</li> <li>Tea</li> </ul> <script> function myFunction() { var newNode = document.createElement("li"); var textNode = document.createTextNode("Water"); newNode.appendChild(textNode); myList.insertBefore(newNode, myList.children[1]); } </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<b>Node.replaceChild()</b> <pre><<c>ul id="ul"> <<c>li>first<<c>/li> <<c>li>second<<c>/li> <<c>li>third<<c>/li> <<c>li>fourth<<c>/li> <<c>/ul> <<c>script> function updateList() { var ol = document.createElement("ol"); while (ul.childNodes.length) { ol.appendChild(ul.childNodes[0]); } ul.parentNode.replaceChild(ol, ul); } <<c>/script></pre> <input type="button" value="Update" onclick="updateList()"> <ul id="ul"> <li>first</li> <li>second</li> <li>third</li> <li>fourth</li> </ul> <script> function updateList() { var ol = document.createElement("ol"); while (ul.childNodes.length) { ol.appendChild(ul.childNodes[0]); } ul.parentNode.replaceChild(ol, ul); } </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<b>Node.removeChild() </b> <pre> <<c>input type="button" value="1 remove me" onclick="updateList(this)"> <<c>input type="button" value="2 remove me" onclick="updateList(this)"> <<c>input type="button" value="3 remove me" onclick="updateList(this)"> <<c>input type="button" value="4 remove me" onclick="updateList(this)"> <<c>input type="button" value="5 remove me" onclick="updateList(this)"> <<c>script> function remove(x) { document.body.removeChild(x) } <<c>/script></pre> <input type="button" value="1 remove me" onclick="remove(this)"> <input type="button" value="2 remove me" onclick="remove(this)"> <input type="button" value="3 remove me" onclick="remove(this)"> <input type="button" value="4 remove me" onclick="remove(this)"> <input type="button" value="5 remove me" onclick="remove(this)"> <script> function remove(x) { document.body.removeChild(x) } </script> <style> #Mdiv {display:none} input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

Edit

#html #網頁格式 #style #div #div #div #div #div #div