-1

これがjsfiddleです 。最初にスクリプトをそのまま試してから、最後の行にコメントを付け、その前の行のコメントを解除すると、必要な機能が得られますが、データが間違っているため、基本的にテンプレートを取得してデータを挿入します。ページ内の別の要素の前に挿入します。問題は、私が使用しているメソッドでは、オブジェクトまたは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

divHTML コードを含む文字列である を要素のように 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);
});

別の回答のコメントで指摘されているように、不必要に 2 つの 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);

スクリプトで。もう 1 つの方法は、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 に答える