jQuery 找不到 div 中 tr 子元素的问题

1. 问题

在实现 点击添加按钮，表单中会添加一行输入项 功能的时候，想出的解决方案为：

1. 添加一个隐藏的 div，div 标签中为输入项模板；

2. 用 js 获取该模板下的 tr 元素并赋值（ clone() 方法）给一个 js 变量；

3. 当点击添加按钮时，使用 append() 将其添加到输入项的上层容器中。

代码为：

// HTML 

<button id="js-add">添加</button>
<table id="js-item-container">

</table>

<div id="js-template" style="display: none;">
<tr class="js-item">
    <td> <input type="text"> </td>
    <td> <input type="password"> </td>
</tr>
</div>

// JavaScript
var $template = $('#js-template').find('.js-item').clone();
$('#js-add').click(function(){
    $('#js-item-container').append($template);
});

可是这样写并不能实现想要的功能，使用 Chrome 的调试工具发现使用 $('#js-template').find('.js-item') 并不能获取到想要的 tr 元素，如下图：

使用 $('#js-template').html() 检查后发现了问题所在：在浏览器解析和渲染之后 tr 标签没了，所以这里是找不到 .js-item 元素的。

2. 解决方法

将包裹 tr 的 div 标签换做 table 即可。猜测 tr 不能脱离 父标签 table 存在。此外，由于 table 会自动在 tr 标签前加上 tbody 标签，所以使用 children('js-item') 也是找不到的，需要使用 find() 方法。