How to add HTML to the text and add it to the DOM to display it?

Question

I have this text:

var text = "some instructions";

I want to set to the text some style and then I want to put it to DOM. So I have tried this:

var text = '"<font size="6">This is some text!</font>"';

But I am not getting the desired result. The text is not changed and I getting html tags being displayed as text.

Any idea on how to add html to the text and then add it to the DOM?

Possible duplicate - https://stackoverflow.com/questions/40858456/how-to-display-a-javascript-var-in-html-body — Luís P. A., May 23 '18 at 10:39
You need to show how you insert the text into the DOM. And please don't use anymore – it's been deprecated since the late 1990s. — JJJ, May 23 '18 at 10:39
Assigning a string to a variable will not add it to the DOM. — Quentin, May 23 '18 at 10:40

score 1 · Answer 1 · answered May 23 '18 at 10:40

1

Use innerHTML on the element where you want to add the html

var text = "<div style='color:red;'>abc</div>";
document.getElementById("abc").innerHTML = text;

answered May 23 '18 at 10:40

Nandita Sharma

13,287
2
22
35

score 0 · Answer 2 · answered May 23 '18 at 10:47

You can Use this to create a DOM Element with text .

var texttag= document.createElement('text');//create DOM 
var text= document.createTextNode("Please Select Program Course"); //Create Your Text 
texttag.setAttribute("for", "Please Select Program Course"); //Create DOM Attributes
texttag.appendChild(text); //append the text into DOM

that is it ..

How to add HTML to the text and add it to the DOM to display it?

2 Answers2