How to add a group of html elements by a button click
Question
I have a requirement to design a button that adds a group of html elements by clicking. The part to be added is inside a <section> . The simplified structure is as followed:
<body>
<section class="pb-5" id="entrySection_1">
<div class="container card">
<div class="row" style="padding-top: 10px;">
<div class="col-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">WO Number</span>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-8">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Status</span>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</section>
</body>
Every time when a user clicks the button, the whole new <section> part with the new id will be inserted after the previous <section> . For example a new section with id entrySection_2 .
Is there a simple way to save a whole section to a variable with an unchanged structure and inserted after the previous section?
3 answers
solution1
1 ACCPTED 2020-11-20 14:19:55
You can try using jQuery's .clone() and .attr() and .insertAfter() like the following way:
var cloneCount = 1 $('#add').click(function(){ $('#entrySection_1').clone() .attr('id', 'entrySection_'+ ++cloneCount) .insertAfter('[id^=entrySection_]:last'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add">Add</button> <section class="pb-5" id="entrySection_1"> <div class="container card"> <div class="row" style="padding-top: 10px;"> <div class="col-4"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" >WO Number</span> </div> <input type="text" class="form-control"> </div> </div> <div class="col-8"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" >Status</span> </div> <input type="text" class="form-control"> </div> </div> </div> </div> </section>
solution2
0 2020-11-20 14:18:24
you could toggle the visibility with the button?
so set the display to "none" on the section you want to show up and then when the button is clicked, turn the display to block or inline-block.
or if you wanted to fully add the section and elements in there, instead of just hiding them, you can either build the structure using something like this .
this.$fixture = $([
"<div>",
" <div class='js-alert-box'></div>",
" <form id='my-form-to-validate'>",
" <input id='login-username' name='login-username'>",
" </form>",
"</div>"
].join("\n"));
by Baer
or using the jquery methods in this reference guide . I'm also sure there are plain javascript versions of those as well.
and trigger these functions on the button click.
solution3
0 2020-11-20 15:01:00
With vanilla js.
Hello, there are several ways to do it, this could be one, create a function that returns an html element and then insert it in the dom, with each click of the button
Every time you click, you call the insert Html function, and with the insertAdherentHTML () method you create the nodes, and pass as an argument the count that will increase the id count, more information
https://developer.mozilla.org/es/docs/Web/API/Element/insertAdjacentHTML
const button = document.querySelector(".button")
const el = document.querySelector(".parent-element")
let count = 0
function insertHtml(idNum) {
const html = `
<section class="pb-5" id="entrySection_${idNum}">
...
</section>
`
return html
}
button.addEventListener("click", () => {
count += 1
const div = insertHtml(count)
el.insertAdjacentHTML("beforeend", div)
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.