jquery - append() 和 appendTo() 不会在元素末尾注入

Question

见http://jsfiddle.net/PAWAS/3/

JavaScript：

$(document).ready(function () {

    $.each($(".item"), function(index, value) { 
        thisEl = $(this);
        thisEl.children("strong").after("<span style='display:inline-block'>");
        $("</span>").appendTo(thisEl);

    });
});​

HTML：

<div class="item">
    <strong>Time Cond:</strong>
    MorningCheck
</div>​

应该：

<div class="item">
    <strong>Time Cond:</strong>
   <span> MorningCheck</span>
</div>​

但是</span>在文本之前被注入MorningCheck

我做错了什么？

Answer 1

.append并.appendTo操作 DOM，不要创建 HTML 字符串。在这里查看一个类似的问题和我的答案：Using .append() with lists places text on a newline。

假设元素内始终只有一个（非空）文本节点，您可以使用以下内容将其放入span元素内：

$(".item").each(function() {
    // get all child nodes, including text nodes
    $(this).contents().filter(function() {
        // is text node and does not only contain white space characters
        return this.nodeType === 3 && $.trim(this.nodeValue) !== '';
    }).wrap('<span style="display:inline-block"></span>'); // wrap in span
});

演示

这会查找非空文本节点并将它们包装在span元素中。如果有多个文本节点，您可能只想获取.last()它们中的一个，或者如果您想strong特别针对元素之后的文本节点，您可以这样做：

$($(this).children('strong').get(0).nextSibling).wrap(...);