Using html tags vs javascript create element

Question

I'm trying to get a grasp on html and javascript and wondering if there is a functional difference between using document.createElement(some_tag) vs <some tag></some tag>. I can see how using javascript's create element might make it easy to create the specific element over and over in different pages/sections of the website (instead of copying and pasting and making your code bulky). But is it bad practice/bad for memory or something to use create element.

For instance, consider the following code:

function createhtml() {
  var li1 = document.createElement("li");
  var text1 = document.createTextNode("First List Item");
  li1.appendChild(text1);
  var ul1 = document.createElement("ul");
  ul1.appendChild(li1);
  document.body.appendChild(ul1);

}

<body onload="createhtml()">
</body>

Is it better to do that, or simply:

<ul>
  <li>First List Item </li>
</ul>

Or are they both exactly the same, and the second one is just easier/faster to type.

You won't get any performance benefits by writing HTML node by node using createElement, and, if you haven't noticed already, it's a lot more cumbersome to write. — jeff carey
– jeff carey, Commented Feb 18, 2017 at 7:16
The biggest difference will be with the DOM. Depending when you run your code and how you need to use things like createElement() so the DOM is aware of the changes. As you start to use JavaScript more you may come across code that attempts to work on something but fails because the DOM tree is unaware of it. Something to look into, also look up event bubbling which is in a similar vein to the DOM. — Blizzardengle
– Blizzardengle, Commented Feb 18, 2017 at 7:25

RATKNUKKL · Accepted Answer · 2017-02-18 07:30:02Z

4

I've found that keeping things separated will save you a lot of frustration down the road. Defining the objects on your page should go in your HTML, styling and animating those elements should go in your CSS and making things do stuff should go in your javascript. Of course, this isn't a hard and fast rule but keeping things separated by intention makes it easier to read and easier to find what you're looking for. Additionally, in response to which method is faster, the pre-assembled HTML is going to load faster than trying to assemble it in js on the fly.

TLDR; create the elements in your HTML whenever possible.

edited Feb 18, 2017 at 7:30

answered Feb 18, 2017 at 7:21

RATKNUKKL

1265 bronze badges

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

Comments

Michael · Accepted Answer · 2022-07-18 23:19:56Z

3

Your page/browser will:

draw the static HTML
go get the JavaScript and run it
redraw the new elements into the page

In your example here that's a trivial thing that a user would never notice, but on larger pages it can cause issues. The JavaScript method is also less efficient in terms of your time and processing efficiency.

Generally speaking, you would want to use JavaScript when you have to generate something that might be changing after the page loads (eg click stuff, do stuff), or different based on circumstances that are present when it loads (eg go get a list of stuff from elsewhere). Static/unchanging material is better off left as HTML.

edited Jul 18, 2022 at 23:19

answered Feb 18, 2017 at 7:32

Michael

5291 gold badge5 silver badges19 bronze badges

Comments

Paddy · Accepted Answer · 2017-02-18 07:18:00Z

0

For the HTML typed, the page will load and your list will be visible.

For the JavaScript version, the page will load, your script will be parsed and run and then the list will be visible.

This is a very trivial example, but straight HTML will be slightly more performant and for static content, much more maintainable.

answered Feb 18, 2017 at 7:18

Paddy

34k15 gold badges82 silver badges121 bronze badges

Comments

Sandeep Bhaskar · Accepted Answer · 2017-02-18 08:07:26Z

0

For your example if you know the number of elements before then using static html tags are better option because it will take time and memory to append to the body.

where in other case if you don't know how many elements are going to be appended to the body then you have to use dom. you can see the performance and memory that your elements going to take can be see in the developers tool "F12" timeline.

answered Feb 18, 2017 at 8:07

Sandeep Bhaskar

3002 silver badges12 bronze badges

Collectives™ on Stack Overflow

Using html tags vs javascript create element

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related