Creating HTML elements with JavaScript vs regular HTML

Question

I have an HTML code like this:

<div id="user-nav">
    <button class="btn btn-primary btn-sm">Subscribe Now</button>
    <button class="btn btn-primary btn-sm">Log In</button>
</div>

And then I tried to create the same thing with JavaScript:

// usernav - subscribe, login, settings
var subbtn = document.createElement("button");
subbtn.className = "btn btn-primary btn-sm";
subbtn.textContent = "Subscribe Now";
usernav.appendChild(subbtn);

var loginbtn = document.createElement("button");
loginbtn.className = "btn btn-primary btn-sm";
loginbtn.textContent = "Log In";
usernav.appendChild(loginbtn);

My JavaScript code works perfectly fine.

However, there is a minor difference in that, the buttons produced by JavaScript are touching each other, whereas when I just coded in HTML, there is a small gap between the two buttons.

When I inspect the element of two pages, the code is the same.

Why does this happen, and how can I produce the exact same result on JavaScript?

Check this JSFiddle. It will help you in understanding better. — Senjuti Mahapatra
– Senjuti Mahapatra, Commented Dec 17, 2015 at 4:19
HTML contains white-space, which makes gap between inline elements, please see more in stackoverflow.com/questions/24083659/… — long.luc
– long.luc, Commented Dec 17, 2015 at 4:35

Alexander O'Mara · Accepted Answer · 2015-12-17 04:27:29Z

Why this Happens:

Your HTML contains white-space characters between the two elements, which gets collapsed into a single space with default styling.

However, your JavaScript does not create this white-space text-node.

Proof:

Here's a snippet which shows there are actually 5 child nodes created by the HTML, 3 of which at text nodes from the white-space.

var el = document.getElementById('user-nav');

console.log(el.childNodes);

document.getElementById('output').textContent = 'Number of Child nodes: ' + el.childNodes.length;

<div id="user-nav">
    <button class="btn btn-primary btn-sm">Subscribe Now</button>
    <button class="btn btn-primary btn-sm">Log In</button>
</div>

<pre id="output"></pre>

If you check your console, you will see output like the following:

NodeList [ #text "
    ", <button.btn.btn-primary.btn-sm>, #text "
    ", <button.btn.btn-primary.btn-sm>, #text "
" ]

Recreate the Result:

You can create a text node in JavaScript using document.createTextNode like this:

var usernav = document.getElementById('user-nav');

var subbtn = document.createElement("button");
subbtn.className = "btn btn-primary btn-sm";
subbtn.textContent = "Subscribe Now";
usernav.appendChild(subbtn);

// Insert text node between the buttons:
usernav.appendChild(document.createTextNode(' '));

var loginbtn = document.createElement("button");
loginbtn.className = "btn btn-primary btn-sm";
loginbtn.textContent = "Log In";
usernav.appendChild(loginbtn);

<div id="user-nav"></div>

However, you may want to consider using CSS instead.

MinusFour · Accepted Answer · 2015-12-17 04:22:52Z

1

You can insert the whitespace with a textNode:

var usernav = document.getElementById('user-nav');
var subbtn = document.createElement("button");
subbtn.className = "btn btn-primary btn-sm";
subbtn.textContent = "Subscribe Now";
usernav.appendChild(subbtn);
usernav.appendChild(document.createTextNode('\n'));

var loginbtn = document.createElement("button");
loginbtn.className = "btn btn-primary btn-sm";
loginbtn.textContent = "Log In";
usernav.appendChild(loginbtn);

<div id="user-nav">

</div>

answered Dec 17, 2015 at 4:22

MinusFour

14.5k4 gold badges32 silver badges39 bronze badges

Collectives™ on Stack Overflow

Creating HTML elements with JavaScript vs regular HTML

2 Answers 2

Why this Happens:

Proof:

Recreate the Result:

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Why this Happens:

Proof:

Recreate the Result:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related