JavaScript outerHTML
last modified April 2, 2025
In this article, we explore the outerHTML property in JavaScript.
This property is essential for DOM manipulation, allowing developers to access
and modify the complete HTML representation of an element.
Basic Definition
The outerHTML property gets the serialized HTML fragment describing
the element including its descendants. It can also be set to replace the element
with nodes parsed from the given string.
Unlike innerHTML, which only includes the element's contents,
outerHTML includes the element itself and all its attributes.
Setting outerHTML replaces the entire element in the DOM.
Basic outerHTML Example
This example demonstrates how to read the outerHTML of a simple div element.
<!DOCTYPE html>
<html>
<head>
<title>Basic outerHTML</title>
</head>
<body>
<div id="content" class="box">Hello there!</div>
<script>
const element = document.getElementById('content');
console.log(element.outerHTML);
</script>
</body>
</html>
In this basic example, we have a div element with ID "content" and class "box". The JavaScript code retrieves this element and logs its outerHTML to the console.
The output will show the complete HTML representation of the element including its attributes and content. This demonstrates how outerHTML provides the full HTML structure of an element.
Replacing Elements with outerHTML
This example shows how to completely replace an element by setting its outerHTML.
<!DOCTYPE html>
<html>
<head>
<title>Replacing Elements</title>
</head>
<body>
<div id="replaceMe">This will be replaced</div>
<button onclick="replaceElement()">Replace</button>
<script>
function replaceElement() {
const element = document.getElementById('replaceMe');
element.outerHTML = '<p class="new">New content here!</p>';
}
</script>
</body>
</html>
Here we have a div element and a button. When the button is clicked, the
replaceElement function replaces the entire div with a new p
element by setting its outerHTML property.
This demonstrates how outerHTML can be used to completely swap out elements in the DOM. The original element is removed and replaced with the parsed HTML.
Comparing innerHTML and outerHTML
This example highlights the difference between innerHTML and outerHTML.
<!DOCTYPE html>
<html>
<head>
<title>innerHTML vs outerHTML</title>
</head>
<body>
<div id="compare" class="container">
<span>Sample text</span>
</div>
<script>
const element = document.getElementById('compare');
console.log('innerHTML:', element.innerHTML);
console.log('outerHTML:', element.outerHTML);
</script>
</body>
</html>
In this example, we log both innerHTML and outerHTML of the same element to the console. The output clearly shows the difference between these properties.
innerHTML only shows the content inside the element (the span), while outerHTML shows the complete element including its class attribute and all its contents.
Cloning Elements with outerHTML
This example demonstrates how to clone an element using outerHTML.
<!DOCTYPE html>
<html>
<head>
<title>Cloning Elements</title>
</head>
<body>
<div id="original" class="box" data-info="important">Original content</div>
<div id="cloneContainer"></div>
<button onclick="cloneElement()">Clone</button>
<script>
function cloneElement() {
const original = document.getElementById('original');
const container = document.getElementById('cloneContainer');
container.innerHTML = original.outerHTML;
}
</script>
</body>
</html>
Here we have an original div with several attributes and a container div. When the button is clicked, the original element is cloned by using its outerHTML.
This technique creates an exact copy of the original element including all its attributes and content. The clone is inserted into the container div.
Security Considerations with outerHTML
This example demonstrates security considerations when using outerHTML.
<!DOCTYPE html>
<html>
<head>
<title>Security Considerations</title>
</head>
<body>
<div id="userContent">Safe content</div>
<button onclick="injectContent()">Inject</button>
<script>
function injectContent() {
// Simulating untrusted user input
const userInput = '<img src="x" onerror="alert(\'XSS\')">';
const element = document.getElementById('userContent');
// UNSAFE: Directly setting outerHTML with untrusted input
// element.outerHTML = userInput;
// SAFER: Using textContent for plain text
element.textContent = userInput;
}
</script>
</body>
</html>
This example shows the potential dangers of setting outerHTML with untrusted input. The commented-out unsafe code would execute arbitrary JavaScript.
When working with user-provided content, it's safer to use textContent or properly sanitize the input before using outerHTML to prevent XSS attacks.
Source
In this article, we have shown how to use the outerHTML property
in JavaScript. This powerful property allows complete access and modification
of HTML elements in the DOM.
Author
List all JS DOM tutorials.