Please help me in this Js problem.

Question

let section = document.getElementById("box");
let div;
let div = document.createElement("div");
div = `<div>Hello</div>`;
section.appendChild(div);
//
//I am trying to appendChild() the created div.
///The code says "Parameter 1 is not type of node"

I am a beginner please help me.

Answer 1

div.innerHTML=`<div>Hello</div>` .

What you are trying to do is assigning a string to div object which basically creates a new object i.e. string.

Answer 2

if you are trying to append <div>Hello</div> to <section> you could just write:

let section = document.getElementById("box");
let div = document.createElement("div");
div.textContent = `Hello`;
section.appendChild(div);

if you want to rather append <div><div>Hello</div></div>, you could follow Abhay answer...

if you just want to put some text in section content, you could just do:

let section = document.getElementById("box");
section.textContent = 'Hello';

you could also append text nodes explicitly (element.appendChild(document.createTextNode('Hello'))), but that's not worth it ;P

Answer 3

obviously, you could also append the html string directly to the section element through innerHTML, but that's not the best way:

let section = document.getElementById("box");
section.innerHTML = `<div>Hello</div>`;

... despite it is shorter, it is more error prone and less efficient than appending nodes, if your html string becomes big ;)

Answer 4

Thank you guys...