Question

innerHTML和jqueries .html（）... GOTCHA！

我刚刚为我的javascript创建了一个小模板html标签，以获取副本并推入表格......看起来像这样：

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

所以在jquery我想，很酷让我们抓住它：

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

然后我将它附加到我真棒的桌子上：

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

它不起作用？

它剥离了<tr>和<td> s并留下了真正的标签，就像我里面的<input />一样。

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

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

仍然无法使用？它仍然剥离了我模板的所有标签......

我把它从地狱中剔除了，偶然发现了这两篇文章：

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

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

太棒了，所以我一生都用过的功能一直都是LIE我告诉你。事实上，它唯一可用的浏览器是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>：

<script type="text/template">

请参阅此处的工作示例：http://jsfiddle.net/6GSJ4/2/

我知道一些框架，例如AngularJS（我使用的一个）允许您将模板放在.innerHTML元素中，因为HTML解析器不会将这些模板作为DOM元素处理，因此您的所有元素都将保留完整。如果你需要它可能是一个选项（虽然{{1}}显然不会工作）。

Answer 2

您当然可以立即将html添加回模板标签。不是最佳的，但会完成工作

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

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

Answer 3

我会这样做。只需将表格用于模板而不显示它：

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

而不仅仅是在文档就绪时选择模板和目标。需要时，克隆模板并将其附加到目标：

$(function(){

  var $table = $( "#TimesheetTable" );
  var $row = $( "#TimesheetEntryRow tr" );

  $('#button').on('click', function(){
    $table.append($row.clone());
  });

});

请参阅此处的工作示例：http://codepen.io/timbuethe/pen/czJla/

Answer 4

你可以＆＃34;误用＆＃34;脚本标签如下：

<script type="text/template" id="TimesheetEntryRow">
    <tr id="row{RowID}">
        <td></td>
    </tr>
</script>

某些JavaScript模板脚本使用此功能，例如： Underscore.js

innerHTML和jqueries .html（）...... GOTCHA！任何适当的工作？

4 个答案: