outerHTML property

The outerHTML property allows you to retrieve and change an HTML code of an element along with its tag.

Syntax

javascriptelement.outerHTML;

Example

Let's output an element text using the outerHTML property:

html<p id="elem">text</p>
javascriptlet elem = document.querySelector('#elem');
console.log(elem.outerHTML);

The code execution result:

javascript'<p id="elem">text</p>'

Example

Let's make div with the same text instead of a paragraph:

html<p id="elem">text</p>
javascriptlet elem = document.querySelector('#elem');
elem.outerHTML = '<div>' + elem.innerHTML + '</div>';

The code execution result:

html<div>text</div>

See also

  • the textContent property
    that contains an element text
  • the innerHTML property
    that contains an HTML code of an element