bugfix> javascript > 投稿

現在、[追加]ボタンがあり、クリックすると、自分のdivが複製されます。現在問題は、ボタンがクリックされてdivが複製されると、「追加」ボタンの下に表示されることです。クリックしたときに元のdivの直下にdivを複製します。これは、複製が[追加]ボタンの上にあることも意味します。これを行うにはどうすればよいですか?

HTML

                   <!-- Instrument Exp. -->
                    <div>
                        <label>What instruments and level do you want to teach?</label>
                        <div class="form-inline justify-content-center" id="ins_1">
                            <!-- Instrument 1 -->
                            <div>
                                <select class="form-control ins">
                                    <option>Instrument</option>
                                    <option>Cello</option>
                                    <option>Clarinet</option>
                                    <option>Drums</option>
                                    <option>Flute</option>
                                    <option>Guitar</option>
                                    <option>Piano</option>
                                    <option>Saxophone</option>
                                    <option>Violin</option>
                                    <option>Vocal</option>
                                    <option>Trumpet</option>
                                </select>
                            </div>
                            <!-- Level 1 -->
                            <div>
                                <select class="form-control lvl">
                                    <option>Level</option>
                                    <option>Beginner</option>
                                    <option>Advanced</option>
                                    <option>Intermediate</option>
                                </select>
                            </div>
                        </div>

                    <!-- Add More -->
                    <div class="text-center" id="add_more">
                        <button type="button" class="no_link" onclick="add_instrument()">Add more +</button>
                    </div>
            </div>

JavaScript

var i = 0;
var original = document.getElementById('ins_1');
function add_instrument() {
    var clone = original.cloneNode(true);
    clone.id = "ins_1" + ++i;
    original.parentNode.appendChild(clone);
}

回答 2 件
  • insertBefore、https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBeforeを参照してください。 nextSiblingと組み合わせると、その直後に追加できます。

    var i = 0;
    var original = document.getElementById('ins_1');
    function add_instrument() {
        var clone = original.cloneNode(true);
        clone.id = "ins_1" + ++i;
        original.parentNode.insertBefore(clone, original.nextSibling);
    }
    
    

    ライブラリを使用せずにJavaScriptで別の要素の後に要素を挿入する方法も参照してください。

    編集:@Tejがコメントで指摘したように、ノードを隣接して挿入する便利な関数があります:insertAdjacentHTMLおよびinsertAdjacentElement。 insertAdjacentElement  IE8 +または最近のブラウザーが必要です。

    私の意見では、これらの関数を使用するとコードが読みやすくなります。

    var i = 0;
    var original = document.getElementById('ins_1');
    function add_instrument() {
        var clone = original.cloneNode(true);
        clone.id = "ins_1" + ++i;
        original.insertAdjacentElement('afterend', clone);
    }
    
    

  • appendChild  ノードの最後の子としてノードを挿入します。この場合、リストとボタンは同じ要素内の子であるため、「追加」ボタンの後です。

    解決策1

    新しいインストゥルメントのリストを別の要素に入れて、親の最後に追加すると望ましい効果が得られるようにします。

    <div>
        <label>What instruments and level do you want to teach?</label>
        <div class="items">
            <div class="form-inline justify-content-center" id="ins_1">
                ...
            </div>
        </div>
        <!-- Add More -->
        <div class="text-center" id="add_more">
            <button type="button" class="no_link" onclick="add_instrument()">Add more +</button>
        </div>
    </div>
    
    
    解決策2

    前に挿入し、「追加ボタン」の前に挿入します。

    original.parentNode.insertBefore(clone, addMoreButton);
    
    
    解決策3(非推奨)

    リストの最後に戻すには、新しい楽器アイテムを追加する「追加」ボタンを追加します。

あなたの答え