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>