-1

这是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并提前致谢。

4

4 回答 4

2

您不能将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;
于 2012-12-30T21:44:10.557 回答
1

这是一篇关于使用 jQuery 操作模板的文章 - 有几个链接和很多好的建议：

于 2012-12-30T21:41:19.883 回答
0 
 $('.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);
 }

这应该工作

于 2012-12-30T21:46:39.763 回答
0

这是答案：

代码：

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

感谢斯图尔特。

于 2012-12-30T22:24:30.940 回答