Kevin Powell - Community•2w ago

Which one is correct?

Hello, Where should I append a created element? https://codepen.io/lanszelot/pen/XJrvRjJ 15th or 17th line is the correct? Both of them do the same result, but I do not know which one is correct and why.

Darth Vader

CodePen

Create Element

...

35 Replies

13eck•2w ago

Jochem•2w ago

outside the for loop. You're building the element in the for loop, then append it after, otherwise you're appending it every time the for loop runs. It works the same because you're re-appending the same element, I think

13eck•2w ago

Pretty much this ☝️ You're only creating the element once so each time you try to append it it's already there so nothing really happens. If you append the element before the loop you get the same result as the inner loop is only changing the content of the paragraph:

const array = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m"];
const main = document.querySelector(".main");
let number = 0;
let double = 0;

for (let i = 0; i < 10; i++) {
  numbers = Math.pow(2, i);
  double = numbers*2;
  let paragraph = document.createElement("p");
  paragraph.innerHTML += double+ " "+array[i];
  main.appendChild(paragraph);
  let icons = document.createElement("p");
  main.appendChild(icons);
  for (let j = 0; j < numbers; j++) {
    icons.innerHTML += " &#128145 ";
  }
}

const array = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m"];
const main = document.querySelector(".main");
let number = 0;
let double = 0;

for (let i = 0; i < 10; i++) {
  numbers = Math.pow(2, i);
  double = numbers*2;
  let paragraph = document.createElement("p");
  paragraph.innerHTML += double+ " "+array[i];
  main.appendChild(paragraph);
  let icons = document.createElement("p");
  main.appendChild(icons);
  for (let j = 0; j < numbers; j++) {
    icons.innerHTML += " &#128145 ";
  }
}

Also, since you're only changing the inner text of the p element you shouldn't be using .innerHTML, as that has a few extra steps to parse and look for HTML elements. You should be using .textContent instead. -# Would you like to know more?

lanszelotOP•2w ago

First of all: thank you so much to everyone. If I am using

.textContent

.textContent

there is something less in css.

13eck•2w ago

-# you can use single backticks for inline code formatting: `test` = test | and continue on with non-formatted text I don't understand what you mean here

lanszelotOP•2w ago

Not in this case, but

.innerHTML

.innerHTML

I can use for everything, this is why I use that all the time.

.innerText

.innerText

and

.textContent

.textContent

have limits I create a problem in the past and looking for hours what did I wrong, after I learned, I am not using the other two I am sure you have right, but I am a beginner, and I am coding only for fun, nothing else. I did not create huge projects.

13eck•2w ago

If you read the link I sent you you'll learn why you shouldn't use .innerHTML. But the short answer is performance and safety. .innerHTML parses looking for HTML elements, which is slow. Also, if used with user-created content it can cause massive security vulnerabilities. Yes, you're a beginner. That's why I'm teaching you the right tool for the job. Learn good habits now and you won't make big mistakes later b/c you know better. * .innerHTML is dangerous and should only be used with strings that have HTML elements and never with unsanitized user input * .innerText is for human-readable text only, but takes styling into account and can cause a complete page reflow (bad for performance) * .textContent gets all text content, including script and style tags, but only sets text—no reflow Knowing the difference between the three is very important

lanszelotOP•2w ago

Thank you so much I tried, and the site not works, because I am using Unicode Character HTML Entity:

&#128145

&#128145

13eck•2w ago

You could just use the emoji, y'know If you must use the HTML character code and can't use the emoji for some reason then you should make the entire string first then set the inner HTML once.

lanszelotOP•2w ago

Thank you, I try it

ἔρως•2w ago

did you try adding a ; at the end? and if you really want to use that html entity, just use String.fromCodePoint(128145), if you want to add it in js then you can use it with .textContent, as you should

13eck•2w ago

Hey, @ἔρως, stop with the logic and good code practices! lol

ἔρως•2w ago

lol just casually dropping a bag of truths also, you are concatenating to .innerHTML

13eck•2w ago

Yeah, each loop O_O

ἔρως•2w ago

i cant imagine how bad the parser is performing at that point poor thing has to parse your text multiple times per frame just concatenate it all into a string, and then send it all in one go: the browser will thank you

13eck•2w ago

So will the end users

ἔρως•2w ago

yup, and if you are lazy, you can just shove everything into an array and join with a space, at the end

Jochem•2w ago

y'all forgetting String.prototype.repeat()?

13eck•2w ago

Yes, yes I am. Why do you ask? lol

Jochem•2w ago

'💑'.repeat(numbers) would work way better than a for loop

ἔρως•2w ago

no, im not the output is a letter and the emoji unless you use replace with a function, it wont work oh wait 🤦 i just described how to make it work ... ... it's too friday for me 😦

lanszelotOP•2w ago

this one is the easiest and works well, thanks

ἔρως•2w ago

you're welcome but please, stop using .innerHTML i cant find a good reason to use it in 2015, let alone 2025

13eck•2w ago

HTMX, since it's returning an HTML string

ἔρως•2w ago

but you have a proper html parser the parser doesnt execute javascript, like how .innerHTML foes does the dom parser has been available for a long time

13eck•2w ago

It's your own server, so I'm assuming that the HTML string is trusted and sanitized, so it's NBD But yes, you can DOMParser.parseFromString() if you want, then .appendChild()

ἔρως•2w ago

exactly, its simple

13eck•2w ago

I was just advocating for the devil, as they say

ἔρως•2w ago

also, if you have a bug or your database is compromised and sends bad html having the parser is good

13eck•2w ago

I'd never use .innerHTML either.

ἔρως•2w ago

i know what you mean but ive seen editor throwing chunks of <style> tags and breaking the site so, i dont trust my own server

13eck•2w ago

If I can, I document.createElement() and do all the needed things, then do one append with that element (if it's client-side generation) 🤢