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

Question

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

错误：NOT_FOUND_ERR：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>​

我的JavaScript代码：

$(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');
    //target.parentNode.insertBefore(document.createTextNode('AZERTY'), target);
    target.parentNode.insertBefore(div, target);
});

jsfiddle再次感谢。

Answer 1

您不能将div （包含HTML代码的字符串）插入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>

作为模板，然后

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

在脚本中。 另一种选择是简单地将HTML字符串直接插入目标中：

    target.innerHTML = div + target.innerHTML;

Answer 2

这是一篇有关使用jQuery处理模板的文章-包含多个链接和很多好的建议-

• 如何使用jquery使用<script type =“ text / template”>创建嵌入的HTML模板

Answer 3

 $('.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);
 }

这应该工作

Answer 4

答案是：

码：

$(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);
});

感谢斯图尔特。