✍ 📁 🙈 🙉 🙊 : Node replaceChild

<h3>Node.replaceChild()</h3>

<pre> replaceChild() 方法可將某個<r>子節點</r>替換為另一個。 
 新節點可以是文字中已存在的，或是你新建立的。

node.replaceChild(newChild, oldChild);

Example:
</pre>
<pre class="ccc">
<ol><li><<?>input type="button" id="inn" 
   value="replaceChild div to textarea" onclick="change()">
<li><<?>div id="ID">this is div or textarea<<?>/div>
<li><<?>script>
<li>function change() {
<li>var Tag = document.getElementById("ID").tagName ;
<li>if(Tag=="DIV"){
       var textarea = document.createElement("textarea");
       textarea.innerHTML = ID.innerHTML;
       textarea.id= ID.id;
       ID.parentNode.replaceChild(textarea, ID); }

<li>else{ var div = document.createElement("div");
      div.innerHTML = ID.innerHTML;
      div.id= ID.id;
      ID.parentNode.replaceChild(div, ID);  }
}
<li><<?>/script>
</ol></pre>
<input type="button" id="inn" value="div ⇋  textarea" onclick="change()">
<br><br>
<div id="ID">this is div or textarea</div>

else{ var div = document.createElement("div");
      div.innerHTML = ID.innerHTML;
      div.id= ID.id;
      ID.parentNode.replaceChild(div, ID);   }
}
</script>

</style>

<h3>Node.replaceChild()</h3>
Example:

<pre>
<ol><li><<?>div id="myList">
<li>  <<?>span >1111<<?>/span >
<li>  <<?>span >2222<<?>/span >
<li>  <<?>span >3333<<?>/span >
<li>  <<?>span >4444<<?>/span >
<li>  <<?>span >5555<<?>/span >
<li><<?>/div>

<li><<?>button onclick="myFunction()">span ⇋ div <<?>/button>

<li><<?>script>
<li> function myFunction() {
<li> var It=document.getElementById("myList");
<li> if(It.children[0].nodeName=="SPAN"){
<li>   for(var xx=0 ; xx<<li>It.children.length ; xx++){
<li>   var div=document.createElement("div")
<li>   var text=document.createTextNode(It.children[xx].innerHTML);
<li>   div.appendChild(text);
<li>   It.replaceChild(div, It.children[xx]); } }

<li> else { for(var xx=0 ; xx<<li>It.children.length ; xx++){
<li>   var span=document.createElement("span")
<li>   var text=document.createTextNode(It.children[xx].innerHTML);
<li>   span.appendChild(text);
<li>   It.replaceChild(span, It.children[xx]); } }
<li>}
<li><<?>/script>

<<?>style>
<li>#myList span {color:blue }
<li>#myList div  {color:darkred}
<li><<?>/style>

</pre>

else { for(var xx=0 ; xx<It.children.length ; xx++){
     var span = document.createElement("span")
     var text= document.createTextNode(It.children[xx].innerHTML);
     span.appendChild(text);
     It.replaceChild(span, It.children[xx]); } }
}
</script>

</style>

Edit

#ccs #HTML #blogger #Node.replaceChild() #createTextNode() #createElement() #子節點替換 #replaces a child #createElement()

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單