为什么在 TR 标记前附加一个空格或换行符会导致它位于 tbody 之外？

Question

我在将 <tr> 字符串标记附加到 table 到 JQuery 时遇到了一个奇怪的行为。每次我附加我作为字符串生成的行时，它都被放在我的 tbody 之外。然后我发现了问题。

如果我像这样附加它，它工作正常：

$("table").append("<tr><td>Test</td></tr>");

但是，如果我在 <tr> 之前添加空格或换行符，它会将行附加到 tbody 之外。

$("table").append(" <tr><td>Test</td></tr>");
$("table").append("\n<tr><td>Test</td></tr>");

有趣的是，如果我使用任何其他角色，它仍然可以正常工作。 这种行为有什么特别的原因吗？

//Works fine without anything before the tr
$("table").append("<tr><td>Second row</td></tr>");

//Works fine also with any character
$("table").append("sdfa<tr><td>Third row</td></tr>");

//Doesn't work when there's an whitespace or newline
$("table").append(" <tr><td>Fourth row</td></tr>");
$("table").append("\n<tr><td>Fifth row</td></tr>");

table tbody td {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tr>
        <td>First row</td>
    </tr>
</table>

Answer 1

该行为符合 jQuery 文档

.append( content [, content ] )

content Type: htmlString or Element or Array or jQuery DOM element, array of elements, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.

其中 htmlString 如果以 <tag ... > 开头则被识别为 HTML

Answer 2

jQuery、manipulationTarget 中有一个辅助实用程序，用于确定 target 将字符串附加到何处。具体来说：

function manipulationTarget( elem, content ) {
    return jQuery.nodeName( elem, "table" ) &&
        jQuery.nodeName( content.nodeType !== 11 ? content : content.firstChild, "tr" ) ?

        elem.getElementsByTagName("tbody")[0] ||
            elem.appendChild( elem.ownerDocument.createElement("tbody") ) :
        elem;
}

当您传入一个以 whitespace 开头的字符串时，它会创建一个文档片段，其中第一个子节点是 text 节点，而不是 tr。乱码文本 (sdfa) 已在另一个实用程序方法中删除。

为什么在 TR 标记前附加一个空格或换行符会导致它位于 tbody 之外？

Why does appending a TR markup with a whitespace or linebreak before it, causes it to be outside the tbody?

html

javascript

jquery

html-table

append