Javascript ersetzen Eltern html (entfernen Kind)

Question

Ich möchte Schleife jedes iframes Tags ich habe auf meiner Seite und ersetzen sie alle mit einem neuen div und auf dem Weg löschen auch den übergeordneten Inhalt, so dass das neue div wird das einzige Kind sein :

<div id="parent"> 
    <p>this is parent content</p> 
    <iframe src="http://www.example.com" id="iframe10"></iframe> 
</div> 

Ergebnis sein sollte:

<div id="parent"> 
    <div id="newdiv">this is new div</div> 
</div> 

Hier ist mein Code alle iframes auf Seite für Looping, das Problem, das ich verstehe nicht, wie ich jeden iframe Eltern zugreifen können und löschen seinen Inhalt:

 var i, frames; 
     frames = document.getElementsByTagName("iframe"); 
     for (i = 0; i < frames.length; ++i) 
     {   
      frame_id = frames[i].id; 
     } 

Dank Shai

Answer 1

Sie es wie folgt schreiben:

function remove_frames() { 
 
    var i = 0; 
 
    var frames = document.getElementsByTagName("iframe"); 
 
    while (frames.length > 0) { 
 
    var f = frames[0]; 
 
    var p = f.parentElement; 
 
    if (p) { 
 
     while (p.children.length > 0) { 
 
     p.children[0].remove(); 
 
     } 
 
     p.innerHTML = "<div id=\"newdiv" + i + "\">this is new div" + i + "</div>"; 
 
     i++; //increase id index 
 
     //p.appendChild(
 
    } 
 
    } 
 
}

<p><input type="button" value="Execute" onclick="remove_frames()" /></p> 
 

 
    <div id="parent"> 
 
    <p>this is parent content</p> 
 
    <iframe src="http://www.example.com" id="iframe10"></iframe> 
 
    </div> 
 

 
    <p style="color:#6595ee">This element does not contain any sibling IFrame and must be exist in final result!</p> 
 

 
    <div id="parent2"> 
 
    <p>this is parent2 content...</p> 
 
    <div>another element</div> 
 
    <iframe src="http://www.example.com" id="iframe20"></iframe> 
 
    <p>another element after iframe.</p> 
 
    </div>

Answer 2

var i, frames; 
frames = document.getElementsByTagName("iframe"); 
for (i = frames.length; i; --i) // the array-like object shrinks every time a frame is removed so we have to loop backwards 
{   
    //frame_id = frames[i].id; 
    // get the parent element 
    var parent = frames[i].parentElement; 
    // empty it (remove all it's elements) 
    while(parent.firstChild) 
     parent.removeChild(parent.firstChild); 

    // add the new div 
    var div = /* create new div */; 
    parent.appendChild(div); 
} 

Answer 3

Sie könnten die Verwendung parentElement

var iframes = document.getElementsByTagName("iframe"); 
 
iframes[0].parentElement.innerHTML = `<div id="newdiv">this is new div</div>`;

<div id="parent"> 
 
    <p>this is parent content</p> 
 
    <iframe src="http://www.example.com" id="iframe10"></iframe> 
 
</div>

Answer 4

Sie Node.parentNode verwenden können die Eltern und Node.removeChild oder Element.innerHTML zu erhalten, den Inhalt zu löschen.

var i, frames; 
 
    frames = document.getElementsByTagName("iframe"); 
 
    for (i = frames.length-1; i >=0; i--) { 
 
    var frame = frames[i]; 
 
    if (frame.parentNode) { 
 
     var parent = frame.parentNode; 
 
     while (parent.firstChild) { 
 
     parent.removeChild(parent.firstChild); 
 
     } 
 
    } 
 

 
    }

<div id="parent"> 
 
    <p>this is parent content</p> 
 
    <iframe src="http://www.example.com" id="iframe10"></iframe> 
 
</div>