使用按键事件添加元素

Adding an element with keypress event

本文关键字：添加 元素 事件      更新时间：2023-09-26

所以我只是在学习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'));
    });
});

所以对于初学者来说，这就是你的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);
    });
});

你需要澄清你的问题的其余部分，为什么你的意思是东西？

你的 jQuery 需要像这样：

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

js小提琴：http://jsfiddle.net/ek922tz2/7/

相关文章：