✍ 📁 🙈 🙉 🙊 : script 元素新增 appendChild()

createElement() 創建元素

<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>

<b>Node.appendChild( )<br>
用來新增一個子節點到指定元素節點的最後面</b>
<pre>
   Node.appendChild(child) : child 為另一個元素物件。

var newDiv = document.createElement("div");
 var newT = document.createTextNode("<<?>div>New div<<?>/div>"); 
     newDiv.appendChild(newT);
     <r>document.body</r>.appendChild(newDiv, div1);

//<r>document.body</r> 內加入新 div

</pre>

<button  onclick="myFunction()">Node.appendChild()</button>
<div id="DP">
<div id="div1" ><<?>div id="div1"><<?>/div></div>
</div>

}
</script>

<b>Node.appendChild( )<br>
用來新增一個子節點到指定元素節點的最後面</b>
<pre>

var newDiv = document.createElement("div");
    var newContent = document.createTextNode("Hi"); 
        newDiv.appendChild(newContent);
        <r>div1</r>.appendChild(newDiv, div1);

//<r>div1</r> 內加入新 div

</pre>

<button  onclick="myFunction()">Node.appendChild()</button>
<div id="div1" ><<c>div id="<r>div1</r>">

</div>
<<c>/div>

<b>Node.insertBefore()<br>
插入新的子代 (child) 元素。</b>
<pre>  parentNode.insertBefore(插入的新元素, 之前的元素物件);

<<c>ol id="myList">
    <<c>li>Coffee<<c>/li>
    <<c>li>Tea<<c>/li>
<<c>/ol>

var newNode = document.createElement("li");
    var textNode = document.createTextNode("new li");
        newNode.appendChild(textNode);
        myList.insertBefore(newNode, myList.children[1]);
</pre>

<button  onclick="myFunction()">insertBefore()</button>
<ol id="myList">
  <li>Coffee</li>
  <li>Tea</li>
</ol>

<b>Node.removeChild() <br>
移除一個子節點，並傳回移除的節點。</b>
<pre><<?>div id="Mid">
<<?>button onclick="remove(this)"> 1 remove me <<?>/button>
<<?>button onclick="remove(this)"> 2 remove me <<?>/button>
<<?>button onclick="remove(this)"> 3 remove me <<?>/button>
<<?>button onclick="remove(this)"> 4 remove me <<?>/button>
<<?>button onclick="remove(this)"> 5 remove me <<?>/button>
<<?>/div>

<<c>script>
function remove(x) { Mid.removeChild(x) }
<<c>/script>

</pre>

<div id="Mid">
<button onclick="remove(this)"> 1 remove me </button>
<button onclick="remove(this)"> 2 remove me </button>
<button onclick="remove(this)"> 3 remove me </button>
<button onclick="remove(this)"> 4 remove me </button>
<button onclick="remove(this)"> 5 remove me </button>
</div>

<B>node.replaceChild( newChild, oldChild )<br>
   取代 元素  </B>
<pre>     newChild 為要加進去的子代元素，
     oldChild 為要換掉的的子代元素。

例: <<?>input id="input_DP" type="text" value="input tag" />

var textarea =document.createElement('textarea') ;
      textarea.innerHTML = "textarea tag";
      textarea.id="textarea_ID" ;
      input_DP.parentNode.replaceChild(textarea , input_DP)

</pre>

}
</script>

#B4 { height:30px ; width:100px ;
      font-size: 16px ;
      cursor: pointer ;
      color: black;
      background-color: lightgray ;
      border-radius: 8px ;
      box-shadow: 4px 4px #999 ;}

#B4:hover { background-color: gainsboro ;}

#B4:active { background-color: darkgray ;
             box-shadow: 1px 1px #666 ;
             transform: translate(4px,4px) ;}

</style>

Edit

#html #網頁格式 #style #div #createElement() 創建元素 #Node.removeChild() #Node.insertBefore() #Node.appendChild( ) #createElement()

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單

createElement()

createElement() 創建元素

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

createElement()

createElement() 創建元素

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單