Question

这是jsfiddle 首先按原样尝试脚本，然后注释最后一行并取消注释它之前的那个将给我我想要的功能但是使用错误的数据，基本上我想要grub一个模板并将数据插入到它之前插入它页面中的另一个元素。问题是我正在使用的方法要求我使用一个对象或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操作模板：

How can I create an embeded HTML template using <script type="text/template"> using jquery

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

感谢斯图尔特。

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

4 个答案: