JavaScriptを親HTML（子を取り除く）に置き換えます

Question

私は自分のページ上にあるiframeタグをループして、すべて新しいdivに置き換えます。そして、途中で親コンテンツも削除するので、新しいdivは唯一の子になります：

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

結果は次のようになります。ここでは

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

は、ページ上のすべてのiframeをループのための私のコードで、問題は、私は、私はそれぞれのiframeの親にアクセスし、その内容を削除することができますどのように理解していない：

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

の

おかげ シャイ

Answer 1

次のように書くことができます：私はテストとして

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

あなたがコンテンツを削除するには、親とNode.removeChildまたはElement.innerHTMLを取得するためにNode.parentNodeを使用することができます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

を使用することができます。

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>