Question

这与earlier question有关。我尝试将AJAX响应中返回的HTML DOM附加到现有DIV。我看到所有的文字，但似乎所有标记，如粗体，斜体等都丢失了。

我的AJAX（XML）数据是这样的：

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

我的jQuery代码执行此操作：

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

尝试对克隆的内容执行.html（）会引发异常： TypeError：无法调用未定义的方法'replace'。

我有点惊讶的是，用jQuery做这件事是非常难以忍受的。我在赛道上做得太远了吗？

Answer 1

似乎麻烦是jQuery找到与允许的标签不同的标签/节点。也就是说，您的XML格式不正确，因为它在内容中同时包含节点和文本。

这不好，但它会起作用：

$("#eventDiv").append($(":first-child", data).parent().html());

将包含<content>标记，但浏览器会忽略该标记。

Answer 2

看起来jQuery没有提供我想要做的简单方法。回顾一下，我的服务器在ajax响应中返回以下数据：

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

我想在div中显示 contents 标记内的内容。我的JS代码在ajax成功处理程序中处理这个，如下所示：

var jData = $( data );

我有一个id为 eventDiv 的div，我需要显示该事件的内容。我希望这样做：

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

但是这导致所有标记丢失，导致文本。

基于XMLSerializer的以下内容适用于我（不适用于IE）：

var contents = jData.find( "contents" );

if( contents != null )
{
    var serializer = new XMLSerializer ();
    $( contents ).contents().each( function( index, value ) 
    {
        var cloned = $( value ).clone();
        $( "#eventDiv" ).append( serializer.serializeToString( cloned[ 0 ] ) );
    });
}

jQuery DOM附加丢失标记

2 个答案: