HTML tag to javascript createElement

Question

I'm having a lot of problems trying to write an HTML code in Javascript DOM. This website is my last hope. I want to convert this HTML tag:

<div class="received_msg">
   <div class="received_withd_msg">
      <p>
         <b>Username: </b> Hello everyone!
      </p>
   </div>
</div>

This is what I have written so far:

var div2 = document.createElement('div');
div2.className = 'received_msg';

var div3 = document.createElement('div');
div3.className = 'received_withd_msg';

var par = document.createElement('p');

var bold = document.createElement('b')

div2.innerHTML += div3.outerHTML;
par.innerHTML += bold.innerHTML + data.username + ' : ' + data.msg;

document.querySelector('#message').append(div2);
document.querySelector('#message').append(par);

The above javascript code doesn't print out the HTML code that I want. What's the proper way to do it?

Note that data.username and data.msg are variables referenced in the full code.

You should be appending, not setting innerHTML

epascarello
– epascarello

2021-03-29 17:45:37 +00:00
Commented Mar 29, 2021 at 17:45 — epascarello
– epascarello, Commented Mar 29, 2021 at 17:45

epascarello · Accepted Answer · 2021-03-29 17:49:50Z

1

You should be appending the elements you create to their parent elements

var div2 = document.createElement('div');
div2.className = 'received_msg';

var div3 = document.createElement('div');
div3.className = 'received_withd_msg';

var par = document.createElement('p');

var bold = document.createElement('b');
bold.textContent = "hello";
// var boldTxt = document.createTextNode("Hello");
// bold.appendChild(boldTxt);


var txt = document.createTextNode(" World");

div2.appendChild(div3);
div3.appendChild(par);
par.appendChild(bold);
par.appendChild(txt);

document.body.append(div2);

answered Mar 29, 2021 at 17:49

epascarello

208k20 gold badges206 silver badges246 bronze badges

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

Comments

Sidorina · Accepted Answer · 2021-03-29 18:08:30Z

1

Writing HTML using vanilla JS might be truly confusing :) As written above, appending children to parent elements would be easier and better in many ways. Just to complete the whole idea with your case and all the variables:

var data = {username: 'John Doe', msg: 'Hello World!'};
var root = document.querySelector('#root');

var div2 = document.createElement('div');
div2.className = 'received_msg';

var div3 = document.createElement('div');
div3.className = 'received_withd_msg';

var par = document.createElement('p');
var bold = document.createElement('b');
bold.textContent = `${data.username}: `;
par.appendChild(bold);
var text = document.createTextNode(data.msg);
par.appendChild(text);

div3.appendChild(par);
div2.appendChild(div3);
root.appendChild(div2);

<div id="root"></div>

answered Mar 29, 2021 at 18:08

Sidorina

761 silver badge7 bronze badges

2 Comments

john frankit Over a year ago

thanks! unfortunately I can't upvote your answer because I'm new. Yes javascript is so confusing to me, I've never written javascript code until now. Guess I have a lot of learning to do!! thanks for your contribution once again :D

Sidorina Over a year ago

I'm happy to help, good luck with your learning, it's only difficult in the beginning (no :D)

Collectives™ on Stack Overflow

HTML tag to javascript createElement

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related