CODEWITHSUNDEEP
javascripthtmlangulartypescript
Iftakhar Ahmed
Iftakhar Ahmed

Reputation: 83

How to show HTML DOM object in html using innerHTML

Dom object have that i parse from html string using DOMParser and edit this html

domObj= '
<html> 
<head>
<style>
</style>
</head>
<body>
<p>this is a paragraph</p>
</body>
</html>'

**In component.html **

<div [innerHTML]="domObj"></div>

I am getting result in browser [object HTMLDocument]

Upvotes: 0

Views: 863

Answers (3)

Akhil Aravind
Akhil Aravind

Reputation: 6130

What you tried to do was correct, but you have to use tild (`) instead of single quotes ('). Check the stackblitz implementation Here

You can refer here for template literals Here

Solution -1. Using single quotes ( ' )

domObj=
    '<html>'+ 
    '<head>'+
    '<style>'+
    '</style>'+
    '</head>'+
    '<body>'+
    '<p>this is a paragraph</p>'+
    '</body>'+
    '</html>'
}

Solution - 2. Using tild ( ` )

domObj=`
    <html> 
    <head>
    <style>
    </style>
    </head>
    <body>
    <p>this is a paragraph</p>
    </body>
    </html>`
}

Upvotes: 1

laujonat
laujonat

Reputation: 342

See DOMParser 

const domObj= '<html> \
<head> 
<style> 
</style> 
</head> 
<body> 
<p>this is a paragraph</p> 
</body> 
</html>';

Get the document object

let doc = parser.parseFromString(domObj, "application/xml")

Construct the XML string

let xml = new XMLSerializer().serializeToString(doc.documentElement);

Select and set innerHTML

document.getElementById('titlebar').innerHTML = xml;

Upvotes: 0

BartoszTermena
BartoszTermena

Reputation: 1487

Use the single backtick :

domObj= `<html> 
<head>
<style>
</style>
</head>
<body>
<p>this is a paragraph</p>
</body>
</html>`

ex. https://stackblitz.com/edit/angular-fkv6bw?file=src/app/app.component.ts

Upvotes: 0

Related Questions