Question

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
});

DEMO

这会查找非空文本节点并将它们包装在span元素中。如果有多个文本节点，您可能只想获取它们的.last()，或者如果您想特别在strong元素之后定位文本节点，则可以执行以下操作：

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

append（）和appendTo（）不会在元素的末尾注入

1 个答案: