For various reasons, you may want to get the HTML code of a specific element in an HTML document.
This is relatively easy to do, with the main problem being that you will need to identify a unique way to select the specific node that you desire.
Using Vanilla JS getElement Methods VS JQuery
Although it is possible to achieve this with JQuery, this task is easy to accomplish using vanilla JavaScript methods, and all of the following examples will use vanilla JavaScript.
The nice thing about each of these examples is that the HTML code will be in a string variable and not an object.
Examples by Node Selection Methods:
getElementById() – This method is likely going to be your best option as long as the element has a unique ID, or is the first element with that unique ID. Unfortunately, this method will not work if you need to specify a DOM node with an ID that is not the first node on the page with that specific ID.
getElementsByClassName() – This method isn’t the best choice as CSS typically targets nodes by their class names. It can work in some situations, and one big difference between getElementById() is that it will return multiple nodes with the same class name.
getElementsByName() – This method is also a good choice as any element in an HTML document can be assigned a unique name value. If there are multiple elements with the same name, you can select a specific element by it’s index value (order value) on the page.
getElementsByTagName() – This method isn’t that great of a choice unless you have no other options. The big issue here is that an HTML document could have many elements with the same tag name, and it could be difficult to find the specific element that you are looking for by it’s tag.
Using innerHTML() vs outerHTML()
In most cases, you will likely want to use the outerHTML method on the node that your code has selected.
OuterHTML includes the tag of the node itself, whereas the innerHTML method does not.
Take this simple example:
<div id="someid"><span>Hello World</span></div>The innerHTML of the someid node is:
<span>Hello World</span>The outerHTML of the someid node is:
<div id="someid"><span>Hello World</span></div>Extracting HTML Code from a DOM Node – getElementById() Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Extract HTML with JS - getElementById()</title>
</head>
<body>
<div id="test123">
<ul>
<li>Example Element One</li>
<li>Example Element Two</li>
<li>Example Element Three</li>
</ul>
</div>
<script>
var MyNode = document.getElementById("test123");
var MyNodeHTML = MyNode.outerHTML;
console.log(MyNodeHTML);
</script>
</body>
</html>Output To the Console:
<div id="test123">
<ul>
<li>Example Element One</li>
<li>Example Element Two</li>
<li>Example Element Three</li>
</ul>
</div>Extracting HTML Code from a DOM Node – getElementsByClassName() Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Extract HTML with JS - getElementsByClassName()</title>
</head>
<body>
<div class="class456">
<ul>
<li>Example Element One</li>
<li>Example Element Two</li>
<li>Example Element Three</li>
</ul>
</div>
<div class="class456">
<ul>
<li>Example Element Four</li>
<li>Example Element Five</li>
<li>Example Element Six</li>
</ul>
</div>
<script>
var MyNodes = document.getElementsByClassName("class456");
//get the second one
var MyNodeHTML = MyNodes[1].outerHTML;
console.log(MyNodeHTML);
console.log("\nType: " + typeof MyNodeHTML);
//Type: string
</script>
</body>
</html>Output To the Console:
<div class="class456">
<ul>
<li>Example Element Four</li>
<li>Example Element Five</li>
<li>Example Element Six</li>
</ul>
</div>
Type: stringExtracting HTML Code from a DOM Node – getElementsByName() Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Extract HTML with JS - getElementsByName()</title>
</head>
<body>
<div name="list">
<ul>
<li>Example Element One</li>
<li>Example Element Two</li>
<li>Example Element Three</li>
</ul>
</div>
<div name="list">
<ul>
<li>Example Element Four</li>
<li>Example Element Five</li>
<li>Example Element Six</li>
</ul>
</div>
<script>
var MyNodes = document.getElementsByName("list");
console.log("There Are " + MyNodes.length + " Node(s).\n");
//get the first node
var MyNodeHTML = MyNodes[0].outerHTML;
console.log(MyNodeHTML);
</script>
</body>
</html>Output To the Console:
There Are 2 Node(s).
<div name="list">
<ul>
<li>Example Element One</li>
<li>Example Element Two</li>
<li>Example Element Three</li>
</ul>
</div>Extracting HTML Code from a DOM Node – getElementsByTagName() Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Extract HTML with JS - getElementsByTagName()</title>
</head>
<body>
<div name="list">
<ul>
<li>Example Element One</li>
<li>Example Element Two</li>
<li>Example Element Three</li>
</ul>
</div>
<div name="list">
<ul>
<li>Example Element Four</li>
<li>Example Element Five</li>
<li>Example Element Six</li>
</ul>
</div>
<script>
var MyNodes = document.getElementsByTagName("div");
var NumNodes = MyNodes.length;
var index = 0;
while (index < NumNodes)
{
console.log("Node #" + (index+1) + "\n");
console.log(MyNodes[index].outerHTML);
index++;
}
</script>
</body>
</html>Output To the Console:
Node #1
<div name="list">
<ul>
<li>Example Element One</li>
<li>Example Element Two</li>
<li>Example Element Three</li>
</ul>
</div>
Node #2
<div name="list">
<ul>
<li>Example Element Four</li>
<li>Example Element Five</li>
<li>Example Element Six</li>
</ul>
</div>