Can we convert string to html in javascript? [duplicate]

Question

Can I convert a string to HTML in javascript?

let description = "<a className="peoplelink" id="ether">Ether</a> // is render as 'the historian of the'";

     let html= // I know that it is easy to do with jquery by using .html() method, but can we convert a string to HTML in javascript?

Use single quotes instead of double quotes to wrap around the string, let foo = '<img src="..." />'; — DarkBee
– DarkBee, Commented Jan 11, 2018 at 8:20
@Weedoze I want to convert string to html like this : <a className="peoplelink" id="ether">Ether</a> is the historian of the <a className="peoplelink" id="jaredites">Jaredites</a>. I am react js developer and I want to change string to html without used jquery. — Gourav Kumar
– Gourav Kumar, Commented Jan 11, 2018 at 10:14

Mosè Raguzzini · Accepted Answer · 2018-01-11 08:38:54Z

3

Nothing to convert, is a simple string to innerHtml:

I.E.:

const markup = `
 <div class="person">
    <h2>
        ${person.name}
    </h2>
    <p class="location">${person.location}</p>
    <p class="bio">${person.bio}</p>
 </div>
`;

document.body.innerHTML = markup;

edited Jan 11, 2018 at 8:38

answered Jan 11, 2018 at 8:21

Mosè Raguzzini

15.9k1 gold badge34 silver badges46 bronze badges

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

5 Comments

RobG Over a year ago

A good answer should explain why the OP has their issue and how your code fixes it.

Gourav Kumar Over a year ago

@mose Raguzzini after using your solution, I have found <a classname="peoplelink" onclick="{this.demoButton}" id="moroni2">Moroni</a> and please see that this is not pure html

Mosè Raguzzini Over a year ago

Please share a snippet I assure it renders pure HTML

Gourav Kumar Over a year ago

before converting(it is simple string)

The record eventually reaches <a className="peoplelink" onClick={this.demoButton} id="moroni2">Moroni</a>, who again translates it and adds his synopsis to <a className="peoplelink" onClick={this.demoButton} id="mormon2">his father</a>’s record

{ after converting}

The record eventually reaches <a classname="peoplelink" onclick="{this.demoButton}" id="moroni2">Moroni</a>, who again translates it and adds his synopsis to <a classname="peoplelink" onclick="{this.demoButton}" id="mormon2">his father</a>’s record

this is browser html

Mosè Raguzzini Over a year ago

Did you miss the string interpolation with backtick (´´) ${variable}

Collectives™ on Stack Overflow

Can we convert string to html in javascript? [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related