如何使用jQuery添加/附加HTML表单元素

Question

单击添加按钮时，我尝试在以下代码中追加或添加表单元素，即名字，姓氏，订阅字段。 我不清楚如何附加表单元素组。 帮我找出错误。

 $('.popup').on('click', function() { let value = $('#data').val(); if (value) { $('#profileCard').append('<li>' + value + '</li>'); $('#data').val(''); } if ($('#checkbox').is(':checked')) { $('#checked').show(); $('#unchecked').hide(); } else { $('#unchecked').show(); $('#checked').hide(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="row" id="data"> <div class="col-md-6 form-group"> <label><b>Firstname</b></label> <input type="" class="form-control" id="fname" placeholder="Enter Firstname" required> </div> <div class="col-md-6 form-group"> <label><b>Lastname</b></label> <input type="text" class="form-control" id="lname" placeholder="Enter Lastname" required> </div> <div class="col-md-12 form-group"> <input type="checkbox" id="checkbox" class="mr-6" name="subscribe"> <label><h6 ><b>Subscribe</b></h6></label> </div> </form> <div class="col-md-6 form-group"> <button type="button" class="popup" data-trigger="focus">Add</button> </div> <div class="row"> <ol id="profileCard" class="dis-none"> <li> <div class="form-group"> <label>Fullname: </label> <h5 id="fullname"></h5> </div> <div class="form-group"> <label>Status: </label> <h5 class="dis-none" id="checked">Subscribed</h5> <h5 class="dis-none" id="unchecked">Not Subscribed</h5> </div> </li> </ol> 

Answer 1

 var data = {items: [ {id: "1", name: "abc", type: "xyz"} ]}; $('button').on('click',function(){ var name = $('#name').val(); var type = $('#type').val(); var id = parseInt(data.items[data.items.length-1].id)+1; data.items.push({"id":id.toString(), "name":name,"type":type}); console.log(data); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <input id="name"/> <input id="type"/> <button>add</button> 

我猜你在找这个！

Answer 2

为了简单起见，请看一下。

 $('.popup').on('click', function() { const fullname = $('#fname').val() + " " + $('#lname').val() const subscribed = $('#checkbox').is(':checked') ? 'Subscribed' : 'Not Subscribed' if (fullname.length) { $('#profileCard').append('<li><div class="form-group">Fullname: ' + fullname + '</div><div class="form-group">Status: ' + subscribed + '</div></li>'); $('#data')[0].reset() } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="row" id="data"> <div class="col-md-6 form-group"> <label><b>Firstname</b></label> <input type="" class="form-control" id="fname" placeholder="Enter Firstname" required> </div> <div class="col-md-6 form-group"> <label><b>Lastname</b></label> <input type="text" class="form-control" id="lname" placeholder="Enter Lastname" required> </div> <div class="col-md-12 form-group"> <input type="checkbox" id="checkbox" class="mr-6" name="subscribe"> <label><h6 ><b>Subscribe</b></h6></label> </div> </form> <div class="col-md-6 form-group"> <button type="button" class="popup" data-trigger="focus">Add</button> </div> <div class="row"> <ol id="profileCard" class="dis-none"> </ol>