Question

这个附加程序工作正常：

document.getElementById('x').appendChild( document.importNode(node, true)  )

但是当我尝试jQuery样式$('#x').append($(node))或$('#x').append(node)时，不起作用。

编辑：对不起，我在复杂的上下文中使用DOMnodes，当使用一个简单的简短示例时，它正在使用$('#x').append( node ) ...请参阅我的Wiki-answer。

Answer 1

您正在使用从其他文档导入节点的document.importNode。在jquery中，您必须使用.contents()

var ele = $(node).contents().html();
$('#x').append(ele)

OR

$('#x').append($(node).contents().html());

Answer 2

假设正常和into-tag-template段DOMnodes：

<div id="x"><p>...</p></div>

<p id="p1">Standard paragraph1</p>
<p id="p2">.. paragraph2, lost?</p>

<template id="t">
  <p>Templated node0!</p>
  <p>Other...</p>
</template>

请参阅this jsfiddle处的完整示例...已测试：

var t = document.getElementById('t');
var all_p = t.content.querySelectorAll("p");
var node0 = all_p[0];
var node1 = all_p[1];
if (!('content' in document.createElement('template'))) alert("NO TEMPLATE")

// append by pure Javascript:
document.getElementById('x').appendChild( document.importNode(node0, true)  )

// append by jQuery:
$('#x').append( $('#p1').clone() )  // standard behaviour as expected
$('#x').append( $('#p2') )  // but LOST IT!

$('#x').append( node0 )  // working fine, not lost!
$('#x').append( $(node0).clone() )  // working fine! (need to clone?)
// $('#x').append( node1.content )  // not work
// $('#x').append($(node1).contents().html()); // not work
$('#x').append( $(node1).html() ); // overhead to translate in to HTML

结论

将std_node称为“标准DOMnode”（如示例中的 paragraph1 ），将tpl_node表示为<template>标记：

$('#x').append( std_node )：“副作用”删除节点。
不是“追加”而是“移动节点”！
$('#x').append( tpl_node )：工作正常。
$('#x').append( $(node) )：删除节点的“副作用”相同。
$('#x').append( $(tpl_node) )：工作正常。
$('#x').append( $(node).clone() )：工作正常。

如何附加DOMnode？

2 个答案:

结论