javascript - dom 节点的 innerHTML 替代方案

Question

var ele = iframe_container[i];
var iframe_element = document.createElement("IFRAME");

我如何使iframe_element唯一的孩子ele？

我已经尝试过appendChild，replaceChild但两者都是出于不同的目的。什么是正确的做法？

Answer 1

您可以删除所有孩子，然后添加您的孩子。

while (ele.firstChild) ele.removeChild(ele.firstChild);
ele.appendChild(iframe_element);

Answer 2

你可以这样做

HTML

<div id="something">Has content <span>you don't want</span></div>

Javascript

function emptyNode(node) {
    while (node.firstChild) {
        node.removeChild(node.firstChild);
    }
}

function innerHTML(node, newNode) {
    emptyNode(node);
    node.appendChild(newNode);
}

var ele = document.getElementById("something");
var iframe_element = document.createElement("IFRAME");

innerHTML(ele, iframe_element);

在jsfiddle 上

注意：@dystroy 比我快。

Answer 3

最简单最快的方法是。

ele.innerHTML = ''
ele.appendChild(iframe_element);