jQuery添加DOM元素

Question

所有关于jQuery.append()的例子似乎都是将HTML字符串附加到容器中。我有一个稍微不同的用例。我的服务器会返回一个包含要显示的HTML文本的XML，类似于：

<event source="foo">
    <contents>
        <h1>This is an event</h1>
        This is the body of the event
    </contents>
</event>

我有一个 div，需要在其中显示这个内容。

我的 JS 目前执行以下操作：

1. Loads up the XML data into jQuery in the $.ajax() success handler:

   var jData = $( data );

2. Find the contents tag and tries to add its children to the div that is supposed to display the event:

   var contents = jData.find( "contents" );
   if( contents != null )
   {
       $( contents ).children().each( function( index, value ) 
       {
        $( "#eventDiv" ).append( $( value ) );
       });
   }
   

在Chrome上，append()调用失败，显示错误信息为“Uncaught Error: WRONG_DOCUMENT_ERR: DOM Exception 4”。调试器显示value是一个DOM Element对象，而$(value)是包含该Element的Object对象。

任何帮助将不胜感激。

谢谢。 -Raj

- Raj

Answer 1

您不能将属于一个DOM树的节点附加到另一个文档中。

尝试使用克隆它们：

$("#eventDiv").append( jData.find("contents").children().clone() );

或者只需使用它们的文本表示即可重新创建它们：

$("#eventDiv").append( jData.find("contents").html() );

- Tomalak

---

谢谢。Clone() 似乎让我向前移动了。但是，调用 html() 会导致错误：$( child ).clone().html(): TypeError: Cannot call method 'replace' of undefined。 - Raj

实际上，我使用contents().clone()，它也包括文本节点。 - Raj

@raj：.html() 失败是因为你在处理一个 XML 文档，而 jQuery 并不完全适用于处理所有情况下的 XML。 - Tomalak

我已经进展得更远了。我现在面临的问题需要一个新问题。谢谢你的帮助，Tomalak！ - Raj

@raj：不用谢。如果你有机会更改服务器发送响应的方式，只需在<contents>中对所有内容进行XML编码，并执行$("#eventDiv").append( jData.find("contents").text() );。 - Tomalak

当我试图将一些DOM节点从一个文档附加到iframe时，我遇到了这个问题。clone()解决了问题，但不适用于IE6/IE7。尝试使用html()，这对所有浏览器都有效。 - Alex Lawrence