✍ 📁 🙈 🙉 🙊 : createElement()

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 測試左單右單