Which one is correct? - Kevin Powell

lanszelot · 2025-02-07T12:39:41.339Z

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.

1

13eck•2/7/25, 12:41 PM

J

Jochem•2/7/25, 12:42 PM

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

JJochem outside the for loop. You're building the element in the for loop, then append i...

1

13eck•2/7/25, 12:44 PM

Pretty much this

1

13eck•2/7/25, 12:47 PM

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 ";
  }
}

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

p element you shouldn't be using

.innerHTML

.innerHTML

.innerHTML

.innerHTML, as that has a few extra steps to parse and look for HTML elements. You should be using

.textContent

.textContent

.textContent

.textContent instead.

1

13eck•2/7/25, 12:56 PM

L

lanszelotOP•2/7/25, 1:07 PM

First of all: thank you so much to everyone.

L

lanszelotOP•2/7/25, 1:08 PM

If I am using

.textContent

.textContent

.textContent

.textContent

there is something less in css.

1

13eck•2/7/25, 1:08 PM

Llanszelot If I am using ```.textContent``` there is something less in css.

1

13eck•2/7/25, 1:13 PM

I don't understand what you mean here

L

lanszelotOP•2/7/25, 1:15 PM

Not in this case, but

.innerHTML

.innerHTML

.innerHTML

.innerHTML

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

L

lanszelotOP•2/7/25, 1:17 PM

.innerText

.innerText

.innerText

.innerText

and

.textContent

.textContent

.textContent

.textContent

have limits

L

lanszelotOP•2/7/25, 1:18 PM

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

L

lanszelotOP•2/7/25, 1:19 PM

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.

1

13eck•2/7/25, 1:25 PM

If you read the link I sent you you'll learn why you shouldn't use

.innerHTML

.innerHTML

.innerHTML

.innerHTML. But the short answer is performance and safety.

.innerHTML

.innerHTML

.innerHTML

.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.

1

13eck•2/7/25, 1:28 PM

```
.innerHTML
```
.innerHTML
```
.innerHTML
```
.innerHTML
is dangerous and should only be used with strings that have HTML elements and never with unsanitized user input
```
.innerText
```
.innerText
```
.innerText
```
.innerText
is for human-readable text only, but takes styling into account and can cause a complete page reflow (bad for performance)
```
.textContent
```
.textContent
```
.textContent
```
.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

L

lanszelotOP•2/7/25, 1:46 PM

Thank you so much

L

lanszelotOP•2/7/25, 1:51 PM

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

&#128145

&#128145

&#128145

&#128145

1

13eck•2/7/25, 1:54 PM

You could just use the emoji, y'know

Llanszelot I tried, and the site not works, because I am using Unicode Character HTML Entit...

1

13eck•2/7/25, 2:44 PM

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.

L

lanszelotOP•2/7/25, 2:47 PM

Thank you, I try it

Llanszelot I tried, and the site not works, because I am using Unicode Character HTML Entit...

Ἔ

ἔρως•2/7/25, 3:15 PM

did you try adding a

;

; at the end?

Ἔ

ἔρως•2/7/25, 3:17 PM

and if you really want to use that html entity, just use

String.fromCodePoint(128145)

String.fromCodePoint(128145)

String.fromCodePoint(128145)

String.fromCodePoint(128145), if you want to add it in js

Ἔ

ἔρως•2/7/25, 3:18 PM

then you can use it with

.textContent

.textContent

.textContent

.textContent, as you should

1

13eck•2/7/25, 3:19 PM

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

Ἔ

ἔρως•2/7/25, 3:19 PM

lol

Ἔ

ἔρως•2/7/25, 3:20 PM

just casually dropping a bag of truths

Ἔ

ἔρως•2/7/25, 3:22 PM

also, you are concatenating to

.innerHTML

.innerHTML

.innerHTML

.innerHTML

1

13eck•2/7/25, 3:22 PM

Yeah, each loop O_O

Ἔ

ἔρως•2/7/25, 3:22 PM

i cant imagine how bad the parser is performing at that point

Ἔ

ἔρως•2/7/25, 3:23 PM

poor thing has to parse your text multiple times per frame

Ἔ

ἔρως•2/7/25, 3:23 PM

just concatenate it all into a string, and then send it all in one go: the browser will thank you

1

13eck•2/7/25, 3:23 PM

So will the end users

Ἔ

ἔρως•2/7/25, 3:24 PM

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

J

Jochem•2/7/25, 3:26 PM

y'all forgetting

String.prototype.repeat()

String.prototype.repeat()

String.prototype.repeat()

String.prototype.repeat()?

1

13eck•2/7/25, 3:26 PM

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

J

Jochem•2/7/25, 3:27 PM

'

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

Ἔ

ἔρως•2/7/25, 3:30 PM

no, im not

Ἔ

ἔρως•2/7/25, 3:30 PM

the output is a letter and the emoji

Ἔ

ἔρως•2/7/25, 3:30 PM

unless you use

replace

replace

replace

replace with a function, it wont work

Ἔ

ἔρως•2/7/25, 3:31 PM

oh wait

Ἔ

ἔρως•2/7/25, 3:31 PM

i just described how to make it work ...

Ἔ

ἔρως•2/7/25, 3:32 PM

... it's too friday for me

Ἔἔρως and if you really want to use that html entity, just use `String.fromCodePoint(1...

L

lanszelotOP•2/7/25, 3:52 PM

this one is the easiest and works well, thanks

Ἔ

ἔρως•2/7/25, 3:52 PM

you're welcome

Ἔ

ἔρως•2/7/25, 3:52 PM

but please, stop using

.innerHTML

.innerHTML

.innerHTML

.innerHTML

Ἔ

ἔρως•2/7/25, 3:53 PM

i cant find a good reason to use it in 2015, let alone 2025

Ἔἔρως i cant find a good reason to use it in 2015, let alone 2025

1

13eck•2/7/25, 3:54 PM

HTMX, since it's returning an HTML string

Ἔ

ἔρως•2/7/25, 3:54 PM

but you have a proper html parser

Ἔ

ἔρως•2/7/25, 3:54 PM

the parser doesnt execute javascript, like how

.innerHTML

.innerHTML

.innerHTML

.innerHTML foes

Ἔ

ἔρως•2/7/25, 3:54 PM

does