CODEWITHSUNDEEP
javascripthtmldom
Jason Woo
Jason Woo

Reputation: 321

Creating HTML elements with JavaScript vs regular HTML

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?

Upvotes: 1

Views: 145

Answers (2)

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60517

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.

Upvotes: 1

MinusFour
MinusFour

Reputation: 14423

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>

Upvotes: 1

Related Questions