Javascript innerHTML和jqueries.html（）。。。明白了！有什么适当的解决办法吗？

innerHTML和jqueries.html（）。。。明白了

我刚刚为我的javascript创建了一个小小的模板html标记，以便获取一个副本并推送到一个表中。。。看起来是这样的：

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

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

然后我把它附加到我那张很棒的桌子上：

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

没用

它剥离了

和

并留下了真正的标签，就像我在里面看到的

一样

所以我想，哦，jquery，你这个淘气的小家伙，我将使用innerHTML，这样我就不必担心jquery是否聪明了：

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

还是不工作？但它还是去掉了我模板的所有标签

我不厌其烦地读了这两篇文章：

火狐：

即：

太好了，所以我用了一辈子的这个函数，我告诉你，这是个谎言。事实上，它唯一能工作的浏览器是Chrome（我认为他们忽略了标准或其他东西？）

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

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

现在上面的内容是有道理的，但我真的不知道innerHTML也会进行html解析来检查您是否愚蠢。。。你们中有谁能想出另一种不必在我的模板器中放置整个标签集的方法吗？

疯了

相关职位：

---

我的完整示例模板如下：

<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

---

无论如何，即使使用clone，上面的示例也不会达到您预期的效果（如果您认为它可以做到，请实际检查元素，它会剥离整个加载）

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

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

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

---

您遇到的问题是由于模板不是有效的HTML<代码>元素必须位于

、

、

、

、

的内部，可能还有其他我忘记的东西。当浏览器看到

元素位于无效位置时，它只会删除它们并继续，将内容保留在原来的位置。（对于不在

s中的

s也是如此）因此，您可以做的是将模板元素设置为

：

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

废话

请参见此处的工作示例：

---

我知道一些框架，比如AngularJS（我使用的框架），允许您将模板放在

元素中，因为HTML解析器不会将这些元素作为DOM元素处理，所以所有元素都将保持完整。如果您需要，这可能是一个选项（尽管

.innerHTML

显然不起作用）。

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

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

请参见此处的工作示例：

您可以像这样“误用”脚本标记：

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

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

---

一些JavaScript模板脚本使用这种方法，例如下划线.js

我会等几年，直到浏览器中真正支持

。使用div并克隆它，然后您可以将其添加到另一个。事实上，这只不过是一次失败，吉米是对的。克隆的东西确实适用于一个测试示例。。。所以我最好举个例子。。在这一点上，它仍然删除该死的标签。。。检查它（我会在最后添加到OP）@Quentin-我同意，不幸的是这不是问题：）如果你用我指定的模板用div尝试一下，它仍然不能正常工作。如果你使用我提供的模板，timesheetTemplateHtml将不会有你期望的效果。试试看：）。这个解决方案在我的OP中，但我确实喜欢你的type=text/模板，我现在就要试试那个小兔子！工作完美。你是一个性感的男人/女孩。干得好。现在我必须找到我的头皮，因为我在愤怒和沮丧的过程中撕下了它。事实上，你添加了一个

元素作为模板内容的一部分。我将模板元素的类型更改为

，这样就没有任何需要导航的“额外”元素（我理解为您问题的一部分）。

方法可能仍然是你最好的选择，不确定。哈，当我打字太慢时，你发表了评论。很高兴你成功了。：）只是一个旁注，通过这样做。。。你已经修复了我的占位符文本区域不工作的另一个问题（不管这意味着什么，只是说你是圣人）！