Javascript 如何从模板而不是html中获取dom元素

这是我的建议 首先，按原样尝试脚本，然后注释最后一行并取消注释它前面的一行，这将为我提供我想要的功能，但是使用错误的数据，基本上我想要grub一个模板并将数据插入其中，然后在页面中的另一个元素之前插入它。 问题是，我正在使用的方法要求我使用对象或elementNode来插入它，但在获取模板后，我留下了html，这会导致错误：

错误：未找到错误：DOM异常8

html：

<section class="container well">
    <header></header>    
    <section id="section">
        <h4 id="heading">heading 4</h4>
        <div id="div_1" class="divs">
            <a href="#">file_1.jpg</a>
            <button class="btn btn-mini btn-danger pull-right">&#10006;</button>
        </div>
        <div id="div_2" class="divs">
            <a href="#">file_2.jpg</a>
            <button class="btn btn-mini btn-danger pull-right">&#10006;</button>
        </div>
        <div id="div_3" class="divs">
            <a href="#">file_3.jpg</a>
            <button class="btn btn-mini btn-danger pull-right">&#10006;</button>
        </div>
        <div id="div_4" class="divs">
            <a href="#">file_4.jpg</a>
            <button class="btn btn-mini btn-danger pull-right">&#10006;</button>
        </div>
        <div class="clearfix">
            <button class="btn btn-primary pull-right add">
                 Add items
            </button>
        </div>
    </section>
    <footer></footer>
</section>
<script type="template" id="template">
    <div id="{{id}}">
        <a href="#">{{fileName}}</a>
    </div>
</script>​

---

再次感谢您的支持。

下面是一篇文章，其中包含了几个链接和许多关于使用jQuery操作模板的好建议：

---

不能将包含HTML代码的字符串

div

作为元素插入DOM中。相反，您可以创建另一个div并设置其

innerHTML

$(document).on('click', '.add', function(e){
    e.preventDefault();
    e.stopPropagation();
    target   = document.getElementById($('.divs')[0].id);
    template = document.querySelector('#template').innerHTML;
    div      = template
                        .replace(/{{id}}/g, '0')
                        .replace(/{{fileName}}/g, 'file_0');
    outerDiv = document.createElement('div');
    outerDiv.innerHTML = div;
    target.parentNode.insertBefore(outerDiv, target);
});

正如对另一个答案的评论所指出的，您可能希望跳过在模板中包含一个div，因为您将不必要地得到两个div。相反，你可以简单地

    <a href="#">{{fileName}}</a>

在剧本里。另一种选择是直接将HTML字符串插入目标：

    target.innerHTML = div + target.innerHTML;

这应该行得通

以下是答案：

代码：

​

---

感谢stuart。

最好不要设置

divtag.id=template.id

-这将创建两个具有相同id的元素。如果要使用它，您可能希望完全跳过将元素放入模板中。@james是的，如果我要使用它，我将只在javascript中创建元素，而不使用模板。我想要的是一个基于模板的解决方案，不涉及使用javascript创建元素，也没有模板插件，我已经在我的项目中使用了这个模板系统。我不认为我现在要改变它。不，我的目的是不在模板中包含包装，但一定要将div的内容放在模板中。示例：

将HTML字符串直接插入目标的方法将不起作用，因为我正在h4元素和div元素之间插入HTML字符串，而不仅仅是在每件事情之后。

div = document.createElement('div');
div.id = '0';
div.innerHTML = template.replace(/{{fileName}}/g, 'file_0');
target.parentNode.insertBefore(div, target);

    target.innerHTML = div + target.innerHTML;

 $('.add').on('click', function(e){
      e.preventDefault();
      e.stopPropagation();
      target   = document.getElementById($('.divs')[0].id);
      template = document.querySelector('#template').html();
      div      = template.replace(/{{id}}/g, '0').replace(/{{fileName}}/g, 'file_0');
      divtag = document.createElement('div');
      divtag.innerHTML = div;
      divtag.id = template.id;
      target.parentNode.insertBefore(divtag, target);
 }

$(document).on('click', '.add', function(e){
    e.preventDefault();
    e.stopPropagation();
    target   = document.getElementById($('.divs')[0].id);
    template = document.querySelector('#template').innerHTML;
    div      = template
                        .replace(/{{id}}/g, '0')
                        .replace(/{{fileName}}/g, 'file_0.jpg');
    new_div  = document.createElement('div');
    new_div.setAttribute('class', 'divs');
    new_div.setAttribute('id', 'div_' + i);
    new_div.innerHTML = div;
    target.parentNode.insertBefore(new_div, target);
});