Question

我抓住了一个HTML文件的内容，我希望将其添加到元素中。

HTML的内容如下所示：

console.log(data);

输出：

<style>
    .data{
        position:relative;
        width:100%;
        height:100%;
    }
</style>
<div id="data">
</div>

然后我将它附加到这样的父元素：

function merge(data,id){
    var el = document.getElementById(id);

    console.clear();
    console.log(el);
    console.log(data);

    el.appendChild(data);       
}

el的输出确实显示了我想要追加的正确元素。

但我似乎得到了这个错误：

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

错误意味着什么，以及如何更正错误？

Answer 1

我认为你正在寻找innerHTML属性，就像在com.sun.javafx.webkit.WebPageClientImpl中一样。

它不起作用的原因是appendChild是一个DOM节点的方法，期望一个DOM节点 - 你提供的是文本数据。请参阅方法定义this answer。

Answer 2

首先创建对象：

var div = document.createElement("div");
div.innerHTML = data;

这会导致data转换为 DOM 对象， DOM 可以使用哪些对象存储在childNodes div属性中1}}。

var children = div.childNodes;
for(var i in children)
    el.appendChild(children[i]);

因此，您可以创建一些函数，如：

function interpret_data(data) {
    var div = document.createElement("div");
    div.innerHTML = data;
    return div.childNodes;
}

function addChildrenTo(children, elem) {
    for(var i in children)
        elem.appendChild(children[i]);
}

function merge(data, id){
    addChildrenTo(interpret_data(data), document.getElementById(id));
}

这应该可以做到！

注意：这些功能不具备防弹功能，因此请与它们一起使用以满足您的需求：）

无法将页面内容附加到父元素

2 个答案: