添加具有keypress事件的元素

Question

因此，我只是在學習JavaScript，並且試圖為教堂的日托服務制作付款計算器。 我想將第二個具有“ child”類的div（其中的所有“東西”）添加到id為“ children”的div中。 我在通過按鍵添加一個簡單的div的地方，但是不會添加第三個。 如何添加多個div，以及如何添加包含所有“內容”的div？ 代碼如下：

 <div id="input">
    <div id="children">
        <div class="child">
        <h2>Choose Child's Class</h2>
        <select id="primary" class="selector">
            <option value=" ">Select Class</option>
            <option value=200>Infants</option>
            <option value=175>Wobblers</option>
            <option value=175>Toddlers</option>
            <option value=165>PreSchool 3's</option>
            <option value=165>PreK 4's</option>
            <option value=75>Schooler Before &amp; After</option>
            <option value=40>Schooler Before Only</option>
            <option value=65>Schooler After Only</option>
            <option value=60>Schooler AFA Before &amp; After</option>
            <option value=20>Schooler AFA Before Only</option>
            <option value=30>Schooler AFA After Only</option>
            <option value=40>Part Time</option>
        </select>
        </div><!--closes child class div-->
   </div><!--closes children id dive-->

    <h3> Press any key on your keyboard to add another child</h3>

和javaScript

$(document).ready(function(){
    var $newChild=$('<div class="child">Testing</div>');
    $(document).keyup(function(){
        $newChild.appendTo($('#children'));
    });
});

Answer 1

因此對於初學者來說，這就是您的javascript的外觀，因此您可以添加許多div

$(document).ready(function(){
    $(document).on('keyup', function(){
        var $newChild=$('<div class="child">Testing</div>');
        $newChild.appendTo($('#children'));
    });
});

要么

$(document).ready(function(){
    $(document).on('keyup', function(){
        var $newChild=$('<div class="child">Testing</div>'); 
        $('#children').append($newChild);
    });
});

您需要澄清其余的問題，為什么您指的是東西？

Answer 2

您的jQuery必須類似於：

$(document).ready(function() {
    var childHtml = "<div class='child'>Child</div>";
    $(document).keyup(function() {        
        $('#children').append(childHtml);
    });
});

jsFiddle： http : //jsfiddle.net/ek922tz2/7/