Question

我不太确定我做错了什么，并且没有任何迹象表明这在IE中不起作用。但是以下代码不会将.after（）中的<dd>元素添加到DOM：

shouts_list_selector = $("#shouts dl#shouts_list");

shout_object = $('<dt>')
            .attr('id', shout.id)
            .text(shout.name)
            .append($('<span>').addClass('separator').text(' : '))
            .append($('<abbr>').addClass('timestamp').attr('title', shout.timestamp).text(shout.when))
            .after($('<dd>').html(shout.message))

shout_object.prependTo(shouts_list_selector).slideDown('slow', 'swing');

shouts是一个包含一些消息的对象。这在Firefox和Chrome中运行良好。但IE缺少<dd>元素。这个例子有什么问题或更好的方法吗？

编辑：以下是显示问题的示例：http://jsfiddle.net/sx6YH/

在Firefox或Chrome中运行时，DD标记会正确显示。但不是在IE中。

Answer 1

我发现这是一个嵌套追加的原因。 IE8似乎无法正确处理这些问题。我有同样的问题，@安迪希恩让我朝着正确的方向前进。在我的情况下，我试图添加一个未排序列表的链接：

<ul id=menu></ul>

使用以下jQuery：

$("ul[id=menu]").append("<li><a href='test.html'>test</a></li>");

这适用于大多数浏览器，但在IE8中不适用。如果你添加它们unnested它确实有效：

$("ul[id=menu]").append("<li/>").html("<a href='test.html'>test</a>");

Answer 2

我能够通过在<dd>之后立即创建appendingTo代码和<dt>代码来实现此目的：

shouts_list = $('<dl>').attr('id', 'shouts_list');

$.each(shouts_object.shouts, function(id, shout) {
    $('<dt>')
        .attr('id', shout.id)
        .text(shout.name)
        .append($('<span>')
                .text(' : '))
        .append($('<abbr>')
                .attr('title', shout.timestamp)
                .text(shout.when))
        .appendTo(shouts_list);
    $('<dd>').html(shout.message)
        .appendTo(shouts_list);
});

shouts_list.appendTo('#shouts');

这在IE8和Firefox中均可正常使用。我觉得IE8中可能存在处理.after

的错误

Answer 3

未显示<dd>元素的原因是因为您正在创建无效的html。使用您当前的代码，html将解析为：

<dt id="1">
    test
    <span class="separator"> : </span>
</dt>
<dd>hello</dd>

<dd>显然应位于<dt>。

内

您的代码应如下所示：

shout_object = $('<dt>')
        .attr('id', shout.id)
        .text(shout.name)
        .append($('<span>').addClass('separator').text(' : '))
        .append($('<abbr>').addClass('timestamp').attr('title', shout.timestamp).text(shout.when))
        .append($('<dd>').html($().emoticon(shout.message)))

然后你的html就可以了，并在ie7 / 8

中渲染

jQuery。之后不在IE7 / IE8中添加元素

3 个答案: