How to display html tag in string?

Question

There is a requirement that retrieving some msg including HTML tag from the back-end, how to rightly display HTML tag but not original tag character.

msg like below ( displays in quotation marks ) :

"This is a <a href="#">link</a>, for a test."

right display:

"This is a link , for a test."

Answer 1

It seems you want display string as html . You just need to add it as innerHTML . Not innerText or textContent

Wrong Display

 let str = `This is a <a href="#">link</a>, for a test.` document.body.innerText += str;

Right Display

 let str = `This is a <a href="#">link</a>, for a test.` document.body.innerHTML += str;

If you want quotes around string use Template Strings

 let str = `"This is a <a href="#">link</a>, for a test."` document.body.innerHTML += str;

Answer 2

You can use innerHTML for this.

Example:

document.getElementById(id).innerHTML  = yourTextWithHtml

Answer 3

You can render HTML using document.write()

document.write(`This is a <a href="#">link</a>, for a test.`);`

But to append existing HTML string, you need to get the id of the node/tag under which you want to insert your HTML string.

There are two ways by which you can possibly achieve this:

Using DOM -

var tag_id = document.getElementById('tagid'); 
var newNode = document.createElement('p');
newNode.appendChild(document.createTextNode(`This is a <a href="#">link</a>, for a test.`)); 
node.appendChild(newNode);

Using innerHTML -

var tag_id = document.getElementById('tagid'); 
tag_id.innerHTML(`This is a <a href="#">link</a>, for a test.`);

Also You can use jQuery html parser to do that like this:

var html =  `This is a <a href="#">link</a>, for a test.`;
html = $.parseHTML( html);
$("#tagId").append(html);

I hope this would help you. Thanks

Answer 4

Escaping -

You should escape any quotes found within your string. Place the \\ in front of them to escape.

 console.log("This is my string with quotes \\" \\" ")