Javascript替换父html（删除子html）

我想循环页面上的每个iframes标记，并用新的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;
        }

vari，帧；
frames=document.getElementsByTagName（“iframe”）；
对于（i=0；i

谢谢

---

Shai

您可以使用

parentElement

var-iframes=document.getElementsByTagName（“iframe”）；
iframes[0].parentElement.innerHTML=`这是新的div`

这是父内容

您可以使用
parentElement
var-iframes=document.getElementsByTagName（“iframe”）；
iframes[0].parentElement.innerHTML=`这是新的div`

这是父内容

您可以使用获取父项和/或删除内容


vari，帧；
frames=document.getElementsByTagName（“iframe”）；
对于（i=frames.length-1；i>=0；i--）{
var frame=frames[i]；
if（frame.parentNode）{
var parent=frame.parentNode；
while（父母，第一个孩子）{
parent.removeChild（parent.firstChild）；
}
}
}

这是父内容

您可以使用获取父项和/或删除内容


vari，帧；
frames=document.getElementsByTagName（“iframe”）；
对于（i=frames.length-1；i>=0；i--）{
var frame=frames[i]；
if（frame.parentNode）{
var parent=frame.parentNode；
while（父母，第一个孩子）{
parent.removeChild（parent.firstChild）；
}
}
}

这是父内容

您可以按以下方式编写：


function remove_frames（）{
var i=0；
var frames=document.getElementsByTagName（“iframe”）；
while（frames.length>0）{
var f=帧[0]；
var p=f.parentElement；
如果（p）{
而（p.childrence.length>0）{
p、 子项[0]。删除（）；
}
p、 innerHTML=“这是新的div”+i+”；
i++；//增加id索引
//p、 附肢儿童(
}
}
}

这是父内容

此元素不包含任何同级IFrame，并且必须存在于最终结果中
这是parent2内容

另一个因素
iframe之后的另一个元素

您可以按以下方式编写：


function remove_frames（）{
var i=0；
var frames=document.getElementsByTagName（“iframe”）；
while（frames.length>0）{
var f=帧[0]；
var p=f.parentElement；
如果（p）{
而（p.childrence.length>0）{
p、 子项[0]。删除（）；
}
p、 innerHTML=“这是新的div”+i+”；
i++；//增加id索引
//p、 附肢儿童(
}
}
}

这是父内容

此元素不包含任何同级IFrame，并且必须存在于最终结果中
这是parent2内容

另一个因素
iframe之后的另一个元素

你应该使用这个'not this'（如果你能看到区别）！@ibrahimmahrir我看到区别了。只是我习惯了es6语法和模板字符串。你应该使用这个'not this'（如果你能看到区别）！@ibrahimmahrir我看到了区别。只是我习惯了es6语法和模板字符串。我想他想删除父级中的所有元素，而不仅仅是iFrame。检查问题中的示例！@ibrahimmahrir代码更新并检查，我想它可以按请求工作。我想他想删除父级中的所有元素否不仅仅是iframes。检查问题中的示例！@ibrahimmahrir代码更新并检查，我认为它的工作原理如下requested@S.Serp为什么？问题出在哪里？for循环中的frames[i]将跳过某些项作为frames。当您从中删除某些项时，长度将更改…请检查我的答案并使用其[Copy snippet to answer]在那里玩按钮…@S.Serp修复了它谢谢！有趣的是，今天早上我刚刚和@TheRealMrCrowley就一个类似的话题（在循环中使用
.pop
）进行了一次对话。这是对话。真的很难注意到这样的事情！@S.Serp为什么？有什么问题吗？帧[I]in-for循环将跳过某些项目作为帧。当您从中删除某些项目时，长度将更改…检查我的答案并使用其[Copy snippet to answer]按钮播放…@S.Serp修复了它谢谢！有趣的是，我刚刚与@TheRealMrCrowley就一个类似的主题进行了对话（在循环中使用
.pop
）今天早上。是对话。真的很难注意到这样的事情！这段代码也不像我说的那样工作，
frames[i]
for循环中的某些项目将作为帧跳过。从中删除某些项目时，长度将更改！请检查我的answer@S.Serp事实上，我认为你错了！我们没有直接从数组中删除，所以它的长度根本没有改变。@ibrahimmahrir如果你调试js代码，你会看到当我们调用removeChild作为iframes，我们实际上是从frames数组中删除它们！（在第一次循环后检查frames.length和frames[0]）@S.Serp不从数组中删除它们，而是从内存中删除它们。数组仍将在内存中引用该空间（不指向任何内容），但数组永远不会更改。如果数组
[iframe1、iframe2、iframe3]
删除第一个iframe后，它将成为
[undefined，iframe2，如果
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);
}