✍ 📁 🙈 🙉 🙊 : script 元素移除 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 測試左單右單

Node replaceChild

window Resize

html 測試 左入右出

html 測試 上入下出

html 測試 單入單出

html 測試 左單右單

Node replaceChild

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單