Javascript替换父html（删除子）

Question

我想循环我页面上的每个 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;
        }

谢谢 谢

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

您可以使用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

您可以使用Node.parentNode 获取父级，使用Node.removeChild 或Element.innerHTML 删除内容。

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>