javascript - innerHTML 和 jqueries .html() ... 明白了!任何适当的解决方法？

Question

innerHTML 和 jqueries .html() ... 错误!

我刚刚为我的 javascript 创建了一个小模板 html 标记，用于获取一个副本并将其推送到一个表中......它看起来像这样:

<div id="TimesheetEntryRow">
            <tr id="row{RowID}">
               <td></td>
            </tr>
</div >

所以在 jquery 中我想，很酷让我们捕获它:

timesheetTemplateHtml = $( "#TimesheetEntryRow" ).html();

然后我将它附加到我的超赞表格中:

$( "#TimesheetTable" ).append( timesheetTemplateHtml );

没用？

它已经剥离了 <tr>和 <td> s 并留下 true 标签，如 <input />我在里面。

所以我想，哦 jquery 你这个顽皮的小动物，我会使用 innerHTML 这样我就不必担心 jquery 太聪明了:

timesheetTemplateHtml = document.getElementById( "TimesheetEntryRow" ).innerHTML;
document.getElementById( "TimesheetTable" ).innerHTML += timesheetTemplateHtml;

还是不行？它仍然剥离了我模板的所有标签...

我大吃特吃，偶然发现了这两篇文章:

火狐:https://developer.mozilla.org/en-US/docs/Web/API/element.innerHTML?redirectlocale=en-US&redirectslug=DOM%2Felement.innerHTML

即:http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx

太棒了，所以我一生都在使用的功能是我告诉你的谎言。事实上，它唯一适用的浏览器是 Chrome(我认为他们忽略了标准或其他什么？)。

我设法弄清楚，如果你把整个标签放在它周围，似乎可以复制它……这很烦人，但这次救了我的命。

<div id="TimesheetEntryRow">
            <table>
                <tr id="row{RowID}">
                   <td></td>
                </tr>
            </table>
</div>

现在上面说的很有道理，但我真的不知道 innerHTML 也做 html 解析来检查你是不是在犯傻...你们中的任何人能想到另一种不必放置整个标签的方法吗在我的模板中设置？

疯狂疯狂疯狂!

相关帖子:

• IE+jQuery+Ajax+XHTML: HTML getting clipped after .html() or .innerHTML

---

我的完整示例模板是这样的:

<div id="TimesheetEntryRow" style="display:none;">
    <table>
        <tbody>
            <tr id="row{RowID}">
                <td>blah</td>
                <td class="timeSpent"><input name="timeMon[]" type="text" class="form-control inputTimeSpent timeSpent timeMon" placeholder="0" /></td>
                <td class="timeSpent"><input name="timeTue[]" type="text" class="form-control inputTimeSpent timeSpent timeTue" placeholder="0" /></td>
                <td class="timeSpent"><input name="timeWed[]" type="text" class="form-control inputTimeSpent timeSpent timeWed" placeholder="0" /></td>
                <td class="timeSpent"><input name="timeThur[]" type="text" class="form-control inputTimeSpent timeSpent timeThur" placeholder="0" /></td>
                <td class="timeSpent"><input name="timeFri[]" type="text" class="form-control inputTimeSpent timeSpent timeFri" placeholder="0" /></td>
                <td class="timeSpent timeSpentWeekend"><input name="timeSat[]" type="text" class="form-control inputTimeSpent timeSpent timeSat" placeholder="0" /></td>
                <td class="timeSpent timeSpentWeekend"><input name="timeSun[]" type="text" class="form-control inputTimeSpent timeSpent timeSun" placeholder="0" /></td>
                <td class="timeSpent"><input disabled type="text" class="form-control timeSpent allocated" /></td>
                <td class="timeSpent"><input disabled type="text" class="form-control timeSpent total" value="0" /></td>
                <td><textarea name="note[]" class="form-control inputNotes" placeholder="Enter notes"></textarea></td>
            </tr>
        </tbody>
    </table>
</div>

所有人注意:如果您使用克隆，请不要忘记在 css 样式上显示: block 。

无论如何，即使使用克隆，上面的示例也不会按照您的预期进行(如果您认为可以，实际上去检查元素，它会剥离整个负载)

Answer 1

您遇到的问题是因为模板不是有效的 HTML。 <tr>元素必须在 <table> 内, <tbody> , <thead> , <tfoot> ，也许还有其他我忘记的事情。当浏览器看到 <tr>无效位置的元素，它只是删除它们并继续前进，将内容留在原处。 (对于不在 <td> 中的 <tr> 也是如此。)因此，您可以做的是使您的模板元素成为 <table>。 :

<table id="TimesheetEntryRow" style="display:none">
    <tr>
        <td>blah</td>
    </tr>
</table>

请在此处查看工作示例:http://jsfiddle.net/6GSJ4/2/

我知道一些框架，例如 AngularJS(我使用的框架)允许您将模板放在 <script type="text/template"> 中元素，因为 HTML 解析器不会将它们作为 DOM 元素处理，因此您的所有元素都将保持不变。如果您需要，这可能是一个选择(尽管 .innerHTML 显然行不通)。