The **`outerHTML` property** is used to set and get the HTML content of the element and its children.

# Syntax

## Get HTML Content

```
let htmlString = element.outerHTML;
```

## Set HTML content

```
element.outerHTML = htmlString;
```

When we set the `outerHTML` of an element, the element and all the child nodes of the element are #key# replaced with the passed HTML String :The passed HTML String is parsed internally. #key#.

# Example

<html>
 <head>
 </head>
 <body>
    <div id="content">
      <b>When we set the outerHTML of an element, the element and all the child nodes of the element are replaced with the passed HTML String(<i>The passed HTML String is parsed internally</i>).</b>
    </div>
    <button id="getHTML"> Get HTML </button> 
    <button id="setHTML"> Set HTML </button> 
 </body>
</html>

let getHTML  = document.getElementById('getHTML');
let setHTML  = document.getElementById('setHTML');

getHTML.addEventListener('click', (ev)=> {
    let content = document.getElementById('content');    
    let outerHTML = content.outerHTML;
    console.log(outerHTML);
});


setHTML.addEventListener('click', (ev)=>{
    let content = document.getElementById('content');
    let HTMLString =  "<div id='content'> <b> This text is inserted by setting the element.innerHTML. At </b>" + new Date();
    content.outerHTML = HTMLString;
});

#content {
    font-size: 23px;
}
button {
    margin: 10px;
    padding: 10px;
    font-size: 15px;
    
}

codemirror

console

In the code above, we have created a `div` and added some content to it.

* We access the `outerHTML` property of the `div` element to get the HTML of the `div` and its children.

* When we set the `outerHTML` of an element, the element and its children are replaced with the passed HTML String.

----

# Points to be noted

If we set `outerHTML` to an element that has no #key# parent element: e.g., elements that are not appended to the DOM #key#, `DOMException` will be thrown.
```

var p = document.createElement("p");
p.outerHTML = "<p> not replaced </p>";
console.log(p.outerHTML); // DOMException

```

---
When we get the HTML content through the `outerHTML` property, if the HTML String contains `&`, `<`, `>` characters, then it will be replaced by the `&amp;` , `&lt;`, `&gt;` entities, respectively.

```
var a = document.createElement("a");
a.href = "https://test.com?id=10&name=t";
console.log(a.outerHTML); 
// <a href="https://test.com?id=10&amp;name=t"></a>
```
---
Imagine that we have a variable reference for an element.  We replace the HTML content of the element using `outerHTML` property. In this case,  the variable still points to the replaced element. 

```
var divEle = document.getElementById("content");
console.log(divEle);
divEle.outerHTML = "<div>This div replaced a paragraph.</div>";
console.log(divEle); // even the div element is replaced. The divEle variable   still have reference to the replaced element.
```

What is outerHTML in JavaScript?

The outerHTML property is used to set and get the HTML content of the element and its children. Syntax Get HTML Content let htmlString = element.outerHTML;  Set HTML content element.outerHTML = htmlString;  When we set the outerHTML of an element, the element and all the child nodes of the element are replaced with the passed HTML StringThe passed HTML String is parsed internally.. Example 