How do I dynamically append html snippets into the web page?

Question

I have the following markup:

<div id="maincontainer">
  <div id="mainMenu">

    <div class="giver">
      <hr class = "giver-hr">
      <select class ="giver-subject"></select>
      <select class ="giver-status"></select>
      <label class = giver-isClient>
        <input type = "radio">
        <span>lorem ipsum</span>
      </label>
    </div>

    <div class="giver">
      <hr class = "giver-hr">
      <select class ="giver-subject"></select>
      <select class ="giver-status"></select>
      <label class = giver-isClient>
        <input type = "radio">
        <span>lorem ipsum</span>
      </label>
    </div>

    <div class="giver">
      <hr class = "giver-hr">
      <select class ="giver-subject"></select>
      <select class ="giver-status"></select>
      <label class = giver-isClient>
        <input type = "radio">
        <span>lorem ipsum</span>
      </label>
    </div>

    <div class="giver">
      <hr class = "giver-hr">
      <select class ="giver-subject"></select>
      <select class ="giver-status"></select>
      <label class = giver-isClient>
        <input type = "radio">
        <span>lorem ipsum</span>
      </label>
    </div>

    <div class="giver">
      <hr class = "giver-hr">
      <select class ="giver-subject"></select>
      <select class ="giver-status"></select>
      <label class = giver-isClient>
        <input type = "radio">
        <span>lorem ipsum</span>
      </label>
    </div>

    <div class="giver">
      <hr class = "giver-hr">
      <select class ="giver-subject"></select>
      <select class ="giver-status"></select>
      <label class = giver-isClient>
        <input type = "radio">
        <span>lorem ipsum</span>
      </label>
    </div>

    <div class="giver">
      <hr class = "giver-hr">
      <select class ="giver-subject"></select>
      <select class ="giver-status"></select>
      <label class = giver-isClient>
        <input type = "radio">
        <span>lorem ipsum</span>
      </label>
    </div>

    <div class="giver">
      <hr class = "giver-hr">
      <select class ="giver-subject"></select>
      <select class ="giver-status"></select>
      <label class = giver-isClient>
        <input type = "radio">
        <span>lorem ipsum</span>
      </label>
    </div>

     <div class="giver">
      <hr class = "giver-hr">
      <select class ="giver-subject"></select>
      <select class ="giver-status"></select>
      <label class = giver-isClient>
        <input type = "radio">
        <span>lorem ipsum</span>
      </label>
    </div>

  </div>
  <div id="legalDocument"></div>
</div>

, where the <div class="giver"> element is repeated multiple (9) times.

What is the best way to append such blocks dynamically, through for(){} cycle for example? The innerHtml property is not recommended from what I've heard. and using a special recursive function that I made doesn't seem to be the right way either.

What should I do? I'd like to extend my Web pages with templates kinda like how Javascript classes behave.

Trí Phan · Accepted Answer · 2019-05-26 12:54:53Z

3

You can do this:

const giver = `
  <div class="giver">
     <hr class = "giver-hr">
     <select class ="giver-subject"></select>
     <select class ="giver-status"></select>
     <label class = giver-isClient>
       <input type = "radio">
       <span>lorem ipsum</span>
     </label>
  </div>
`;

for (let i = 0; i < 9; i++) {
  document.getElementById("mainMenu").insertAdjacentHTML("beforeend", giver);
}

edited May 26, 2019 at 12:54

answered May 26, 2019 at 9:51

Trí Phan

1,2033 gold badges17 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Igor Cheglakov Over a year ago

Is it a "legit" method people use or is it more like proof of concept?

Armen Michaeli Over a year ago

This will induce HTML parsing exactly as many times as insertAdjacentHTML is called, given how the method is provided source code, even though the latter may be the same as one of prior calls.

Trí Phan Over a year ago

@IgorCheglakov yes, it is a "legit" method

Armen Michaeli · Accepted Answer · 2022-02-07 20:36:07Z

I'd use HTML templates -- that's what they're for:

<html>
    <head>
        <template id="giver-template">
            <div class="giver">
                <hr class = "giver-hr">
                <select class ="giver-subject"></select>
                <select class ="giver-status"></select>
                <label class = giver-isClient>
                    <input type = "radio">
                    <span>lorem ipsum</span>
                </label>
            </div>
        </template>
    </head>
    <body>
        <!-- document body -->
    </body>
</html>

The contents of a template, a DocumentFragment, are available through accessing the content property on the template element itself; these contents, being a DocumentFragment, are in a convenient form, parsed and ready, and will not incur extra overhead the way innerHtml or insertAdjacentHTML would imply because of need to parse the markup and produce DOM objects for insertion into the document.

As you can observe, template elements are contained in the document head section, meaning they are not themselves rendered or are part of your document body otherwise -- their utility lies in being able to clone them and use their "instantiated" copies.

You can trivially use the template defined above for your use-case:

const new_giver_element = document.getElementById("giver-template").content.cloneNode(true);

Meaning that new_giver_element now refers to a new, unattached DOM node (a DocumentFragment) (which you can further modify if you so wish) ready for insertion into a document through appendChild or other methods.

Abdulaziz · Accepted Answer · 2019-05-26 11:57:44Z

you can use createElement and appendChild

see demo - stackblitz

<div id="maincontainer">
    <div id="legalDocument">
    </div>
</div>

var wrapper = document.querySelector("#mainMenu");
for(let i=0; i<9; i++) {
    wrapper.appendChild(createBox());
}

function createBox() {
  const giver  = document.createElement("div");
  giver.className = 'giver'
  const givenHr  = document.createElement("hr");
  givenHr.className = 'giver-hr'
  const giverSubject  = document.createElement("select");
  giverSubject.className = 'giver-subject'
  const giverStatus  = document.createElement("select");
  giverStatus.className = 'giver-status'
  const giverIsClient  = document.createElement("label");
  giverStatus.className = 'giver-isClient'
  const input  = document.createElement("input");
  input.type = 'radio'
  const span  = document.createElement("span");
  const text = document.createTextNode('lorem ipsum');

  span.appendChild(text);
  giverIsClient.appendChild(input);
  giverIsClient.appendChild(span);

  giver.appendChild(givenHr);
  giver.appendChild(giverSubject);
  giver.appendChild(giverStatus);
  giver.appendChild(giverIsClient);

  return giver;
}

Collectives™ on Stack Overflow

How do I dynamically append html snippets into the web page?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related