我正在使用 DOMParser 解析带有 html 标签的字符串,以将其附加到另一个 dom 节点
window.addEventListener("load",carga);
var origen = document.getElementById('origen');
var destino = document.getElementById('destino');
function carga(e){
origen.addEventListener('dragstart',function(e){
e.dataTransfer.setData("Text",origen.outerHTML);
},false);
destino.addEventListener('dragover',function(e){
e.preventDefault();
});
destino.addEventListener('drop',function(e){
e.preventDefault();
console.log( e.dataTransfer.getData("Text"));
var parser = new DOMParser();
dragged = parser.parseFromString( e.dataTransfer.getData("Text") , "text/html");
console.log(dragged);
destino.appendChild(dragged);
},false);
}
拖拽变量的内容为:
<section draggable="true" id="origen" style="height: 50px; width: 50px; border-color: green; border-style: solid;">origen</section>
最佳答案
实际上当你使用DOMParser
时的parseFromString()
method使用选项 text/html
它将返回 HTMLDocument
而不是 DOM 元素。因此,您不能直接将结果附加到元素,这就是为什么您会收到 TypeError: Argument 1 of Node.appendChild is not an object
。
在将其附加到您的元素之前,您需要获取此 HTMLDocument
的内容,这就是您应该如何实现它:
var parser = new DOMParser();
var dragged = parser.parseFromString( "<div><p>foo</p><p>bar</p></div>" , "text/html");
var divDoc = dragged.getRootNode();
destino.appendChild(divDoc.body);
演示:
这是一个工作示例:
var parser = new DOMParser();
var dragged = parser.parseFromString( "<div><p>foo</p><p>bar</p></div>" , "text/html");
var divDoc = dragged.getRootNode();
document.body.appendChild(divDoc.body);
关于javascript - 无法将解析后的字符串附加到 dom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47218300/