How to stringify [object HTMLDivElement] to html string in javascript

Question

I have written following code to find and get the div element with id vcr_data from html string. When I try to append that div to html tag, it's getting printed as follows instead of the stringified div:

... <body>[object HTMLDivElement]</body></html>

code snippet:

let doc = new DOMParser().parseFromString(html, 'text/html');
console.log('div element ', doc.getElementById('vcr_data'));

const response = `<!DOCTYPE html>
  <html>
    <head>
      <style id="jss-server-side"></style>
    </head>
    <body>${doc.getElementById('vcr_data')}</body>
  </html>`;

console.log('html: ', response);

Barmar · Accepted Answer · 2019-08-22 15:47:50Z

16

Use .outerHTML to get the HTML of the DIV.

<body>${doc.getElementById('vcr_data').outerHTML}</body>

answered Aug 22, 2019 at 15:47

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

1 Comment

Harm Over a year ago

And in case anyone's trying to do this with the Click Element variable in Google Tag manager like I was: Use the dataLayer variable gtm.element.outerHTML

Collectives™ on Stack Overflow

How to stringify [object HTMLDivElement] to html string in javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related