Append child same text node is not working

Question

I found the answer. Insert HTML element two (or more) times using JavaScript

But I need in depth knowledge about this. How does this happened without for loop or cloning?

let strong = document.createElement('strong');
let text = document.createTextNode('text');
strong.appendChild(text);

let p = document.querySelector('p')
p.appendChild(strong);

// let anotherText = document.createTextNode('anotherText');
// document.querySelector('strong').appendChild(anotherText)

document.querySelector('strong').appendChild(text);

if you uncomment lines then anotherText gets added to strong tag. Why the last one is not working?

There is some reference or what?

score 0 · Answer 1 · answered Aug 01 '20 at 08:45

let strong = document.createElement('strong');
let text = document.createTextNode('text');
strong.appendChild(text);

let p = document.querySelector('p')
p.appendChild(strong);

// let anotherText = document.createTextNode('anotherText');
// document.querySelector('strong').appendChild(anotherText)

document.querySelector('strong').appendChild(text);

<p></p>

Even if i uncomment the commented line, it does not work. So sotrong is not yet inserted into the document, searching it through querySelector will give undefined. So first it needs to be inserted in the the dom, then your document.querySelector('strong') will work.

Even in your fiddle it works, if I uncomment the last lines. — Asutosh, Aug 01 '20 at 08:57

score 0 · Answer 2 · edited Aug 01 '20 at 09:02

0

Just need more clarification. But this last line cannot work because text node is already added to strong.

strong = document.createElement('strong');
let text = document.createTextNode('text');
strong.appendChild(text); //You already did the same here 

let p = document.querySelector('p')
p.appendChild(strong);

// let anotherText = document.createTextNode('anotherText');
// document.querySelector('strong').appendChild(anotherText)

document.querySelector('strong').appendChild(text); //This is already executed at strong.appendC...

edited Aug 01 '20 at 09:02

Dharman

30,962
25
85
135

answered Aug 01 '20 at 08:56

Parampreet Rai

154
1
12

then I think there is reference to ```text``` variable – Tamerlan Aug 01 '20 at 08:58
Yes, you need to create another ```textnode``` for another ```appendChild```. – Parampreet Rai Aug 01 '20 at 09:02

Append child same text node is not working

2 Answers2