Add HTML with variable using JavaScript

Question

I am trying to have my JavaScript print a variable along with some text, I have an example(it doesn’t work, I think...):

CSS

.container { border: 2px solid #dedede; background-color: #f1f1f1; border-radius: 5px; padding: 10px; margin: 10px 0; } @font-face { font-family: Superfont; src: url(Suplexmentary_Comic_NC.ttf); } .name{ font-size: 6px; border-style: solid; border-color: red; } .message{ font-family: Superfont; }

Java

let addthistext = "hi" document.getElementById("parentID").appendChild(<div class="container"> <p class="name">member</P> <p class="message">text</p> </div>)

Could you try coming up with an answer?

developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

Teemu
– Teemu

2020-01-27 18:56:04 +00:00
Commented Jan 27, 2020 at 18:56 — Teemu
– Teemu, Commented Jan 27, 2020 at 18:56

Dominik Matis · Accepted Answer · 2020-01-27 19:07:21Z

2

Almost correct, need to create new element

let addthistext = "hi"; let el = document.createElement('p'); el.innerText = addthistext; el.classList.add("text"); document.getElementById("parentID").appendChild(el)

.text{ font-family: "Times New Roman", Times, serif; }

<div id='parentID'></div>

edited Jan 27, 2020 at 19:07

answered Jan 27, 2020 at 18:55

Dominik Matis

2,15612 silver badges15 bronze badges

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

2 Comments

user12725549 Over a year ago

Thank you, @Dominik Matis, I would also like to add a class to it, please see the edit Thank you again!

user12725549 Over a year ago

could you take a second look at the JavaScript, I added a <div>

Taua Negri · Accepted Answer · 2020-01-27 18:58:56Z

I think that Dominik's Answer is the correct one if you want to go with pure javascript, but if you want to go with a JQuery solution ( which is much easier) try this:

$('#parentID').append('<p>addthistext</p>')

Collectives™ on Stack Overflow

Add HTML with variable using JavaScript

CSS

Java

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

CSS

Java

2 Answers 2

2 Comments

Comments

Related