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

Question

here's the jsfiddle at first try the script as is and then comment the last line and uncomment the one before it that will give me the functionality i want but with the wrong data, basically i want to grub a template and insert data into it and the insert it before another element in the page. the problem is that the method that i'm using requires me to use an object or elementNode to insert it but after fetching the template i'm left with html wich result in an error :

Error: NOT_FOUND_ERR: DOM Exception 8

the 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>​

my javascript code:

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

the jsfiddle again and thanks in advance.

Answer 1

You cannot insert div , which is a string containing HTML code, into the DOM as if it were an element. Instead, you could create another div and set its 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);
});

As noted by a comment on another answer, you may want to skip having a containing div within the template, as you will end up with two divs unnecessarily. Instead you could have simply

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

as the template and then

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

in the script. Another alternative is simply to insert the HTML string directly into the target:

    target.innerHTML = div + target.innerHTML;

Answer 2

Here is an article - with several links and lots of good advice - about manipulating templates with 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);
 }

This should work

Answer 4

here's the answer :

code:

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

​ thanks to stuart.