CODEWITHSUNDEEP
javascripthtmljquery
BabyHai
BabyHai

Reputation: 93

How to add a group of html elements by a button click

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?

Upvotes: 0

Views: 1238

Answers (3)

JairDevep
JairDevep

Reputation: 1

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)
})

Upvotes: 0

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 1

CompWitch
CompWitch

Reputation: 44

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.

Upvotes: 0

Related Questions