How to add dynamically HTML with JS?

Question

I tried to add HTML code after clicking a button.

Here is the thing; you input the tab's name then click the button linked to the addTab function. Then I tried to write the code using createElement(), setAttribute() and appendChild() but nothing works.

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

function addTab() {
  var tabname = entree.value;
  var btn = document.createElement("BUTTON");
  btn.innerHTML = tabname;
  btn.setAttribute("class", "tablinks")
  btn.setAttribute("onlick", "openTab(event, ${tabname})");
  var tabbar = document.getElementsByClassName("tab");
  document.tabbar.appendChild(btn);

  var tabdiv = document.createElement("DIV");
  document.body.appendChild(tabdiv);
  tabdiv.setAttribute("id", tabname);
  tabdiv.setAttribute("class", "tabcontent")

  var tabp = document.createElement("P");
  var tabptxt = document.createTextNode("Réussite.");
  tabp.appendChild(tabptxt);
}

header {
  padding-bottom: 10px;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<header>
  <label>Enter tab's name : </label>
  <input type="text" id="entree" minlength="4" maxlength="12" size="12">
  <button onclick="addTab()">VALIDER</button>
</header>

<body>
  <div class="tab">
    <button class="tablinks" onclick="openTab(event, '12septembre')">12septembre</button>
    <button class="tablinks" onclick="openTab(event, '7octobre')">7octobre</button>
  </div>
  <div id="12septembre" class="tabcontent">
    <h3>12 septembre</h3>
  </div>
  <div id="7octobre" class="tabcontent">
    <h3>7 octobre</h3>
  </div>
</body>

As I'm not experimented using Js, i get lost easily! I also wondered, is this the best way to add tabs dynamically?

Thanks for your help.

btn.setAttribute("onlick", "openTab(event, ${tabname})"); <-- wrong, because the sting will be unquouted and you really should be using addEventListener — epascarello
– epascarello, Commented Aug 28, 2019 at 13:20

jonatjano · Accepted Answer · 2019-08-28 13:38:47Z

2

the problem

You were almost there, there are 2 problems in your js making it to fail :

var tabbar = document.getElementsByClassName("tab");
document.tabbar.appendChild(btn);

you called the variable tabbar but on next line try to call it with the name document.tabbar which is not the same thing, this can be seen in the browser console: it's telling document.tabbar is undefined.
you misused document.getElementsByClassName, you probably thought it return an HTMLElement but in fact it returns an HTMLCollection, a sort of array with less buitin method, so you need to get your element out of the collection.

here's a corrected version of these 2 lines :

var tabbar = document.getElementsByClassName("tab")[0];
tabbar.appendChild(btn);

use `id`s instead of `class` in js

I personnaly prefer using ids to get element with document.getElementById, since id MUST be unique so a good formed HTML will always have only one element with this id

also document.getElementById returns an HTMLElement so no need to look for the wanted Element in an a Collection

and finally since using class as a vulnerability, if you ever add another tag with the same class before the current one then your tabbar will become the second element of the HTMLCollection

another error you didn't see yet

as mentionned by epascarello in comments

btn.setAttribute("onlick", "openTab(event, ${tabname})");

should be written

btn.setAttribute("onlick", `openTab(event, '${tabname}')`);

with ` instead of " to use the expension of template litterals

as a note : it is considered bad practise to define event in the HTML, you should do it like this :

btn.addEventListener('click', openTab)

or you can also use

btn.onlick = function() { openTab(btn, tabname); } // or
btn.onlick = () => openTab(btn, tabname);

but these two ways to write it requires you to modify openTab replacing

evt.currentTarget.className += " active";

by

btn.className += " active"

a corrected version

and finally a corrected version of your snippets (I didn't touch anything except these 3 lines)

function openTab(evt, tabName) {
    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

function addTab() {
    var tabname = entree.value;
    var btn = document.createElement("BUTTON");
    btn.innerHTML = tabname;
    btn.setAttribute("class", "tablinks")
    btn.setAttribute("onlick", `openTab(event, '${tabname}')`);
    var tabbar = document.getElementsByClassName("tab")[0];
    tabbar.appendChild(btn);

    var tabdiv = document.createElement("DIV");
    document.body.appendChild(tabdiv);
    tabdiv.setAttribute("id", tabname);
    tabdiv.setAttribute("class", "tabcontent")

    var tabp = document.createElement("P");
    var tabptxt = document.createTextNode("Réussite.");
    tabp.appendChild(tabptxt);
}

header {
    padding-bottom: 10px;
}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    background-color: #ccc;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

<header>
    <label>Enter tab's name : </label>
    <input type="text" id="entree" minlength="4" maxlength="12" size="12">
    <button onclick="addTab()">VALIDER</button>
</header>

<body>
    <div class="tab">
        <button class="tablinks" onclick="openTab(event, '12septembre')">12septembre</button>
        <button class="tablinks" onclick="openTab(event, '7octobre')">7octobre</button>
    </div>
    <div id="12septembre" class="tabcontent">
        <h3>12 septembre</h3>
    </div>
    <div id="7octobre" class="tabcontent">
        <h3>7 octobre</h3>
    </div>
</body>

there are also some other things to say on your code but it's mainly because you don't know JS native API enought yet.

edited Aug 28, 2019 at 13:38

answered Aug 28, 2019 at 13:18

jonatjano

3,7681 gold badge17 silver badges20 bronze badges

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

6 Comments

epascarello Over a year ago

Still has another issue which I mentioned in a comment

jonatjano Over a year ago

@epascarello didn't see that one

imrems Over a year ago

It's working! Thanks a lot for your help, I can understand my mistakes and that essential to me. Have a good day! Oh tes @epascarello indeed I need to use addEventListener, thanks a lot!

jonatjano Over a year ago

@rems added a part about the error mentionned by epascarello

imrems Over a year ago

@jonatjano yes that's perfect, thanks ;) but the code doesn't save the modifications ? As I'd like to put this code on my wordpress website, i got to keep the added tabs on!

|

Shakir Ahamed · Accepted Answer · 2019-08-29 05:49:35Z

Like above you can add a debugger in browser console and check

var tabbar = document.getElementsByClassName("tab");

in here tabbar will return HTMLCollection so we have to get only the element from the Collection. we can get the element from the collection like below.

var tabbar = document.getElementsByClassName("tab");
tabbar[0].appendChild(btn);

function openTab(evt, tabName) {
    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

function addTab() {
    var tabname = entree.value;
    var btn = document.createElement("BUTTON");
    btn.innerHTML = tabname;
    btn.setAttribute("class", "tablinks")
    btn.setAttribute("onlick", "openTab(event, ${tabname})");
    var tabbar = document.getElementsByClassName("tab");
    tabbar[0].appendChild(btn);

    var tabdiv = document.createElement("DIV");
    document.body.appendChild(tabdiv);
    tabdiv.setAttribute("id", tabname);
    tabdiv.setAttribute("class", "tabcontent")

    var tabp = document.createElement("P");
    var tabptxt = document.createTextNode("Réussite.");
    tabp.appendChild(tabptxt);
}

header {
    padding-bottom: 10px;
}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    background-color: #ccc;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <label>Enter tab's name : </label>
    <input type="text" id="entree" minlength="4" maxlength="12" size="12">
    <button onclick="addTab()">VALIDER</button>
</header>

<body>
    <div class="tab">
        <button class="tablinks" onclick="openTab(event, '12septembre')">12septembre</button>
        <button class="tablinks" onclick="openTab(event, '7octobre')">7octobre</button>
    </div>
    <div id="12septembre" class="tabcontent">
        <h3>12 septembre</h3>
    </div>
    <div id="7octobre" class="tabcontent">
        <h3>7 octobre</h3>
    </div>
</body>

Yes! It's working too. Thanks a lot! Just need to change my button attribution of the onclick
@ShakirAhamed the answer is good but it can be better by explaining what you changed, and why it needed to be changed

Ludovico Sidari · Accepted Answer · 2019-08-28 13:06:57Z

-1

Try Jquery! For example:

this.$OuterDiv = $('<div></div>')
.hide()
.append($('<table></table>')
    .attr({ id : tabname })
    .addClass("tabcontent")
);

answered Aug 28, 2019 at 13:06

Ludovico Sidari

676 bronze badges

1 Comment

imrems Over a year ago

Thanks, i'll try this!

Collectives™ on Stack Overflow

How to add dynamically HTML with JS?

3 Answers 3

the problem

use `id`s instead of `class` in js

another error you didn't see yet

a corrected version

6 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

the problem

use ids instead of class in js

another error you didn't see yet

a corrected version

6 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related

use `id`s instead of `class` in js