How to get the outerHTML of an element using jQuery

In this example I will show you one way to get the outer HTML of a DOM element using the JavaScript jQuery Library. We will get the html of our target element using several jQuery functions. But don’t let that worry you, because we can still achieve our goal with one simple line of code if you want to skip the reading. I will also walk you through a step by step process to illustrate in detail how it works.

At the time of this writing, jQuery does not have a function to get the outerHTML of an element on a web page. But that’s ok, since we can accomplish this with just a few function calls strung together.

Some Sample HTML

Let’s take a look at some HTML.

<div id="container">
    <p>
        I am some text inside a 'p' tag. <span>I am a child element in this paragraph.</span>
    </p>
    <span>I am some text inside a 'span' tag.</span>
    <input type="text" name="someinput" value="I am a value inside an input tag." />
</div>

Getting HTML From An Element (inner HTML, that is)

Let’s say we wanted to get the HTML contents of the “container” div element. We could use jQuery’s html() method. But, what if we wanted to get the outer HTML of that element? If the element had no siblings then it would be safe to use the jQuery parent() method like so:

var htmlString = $('#container').parent().html();

The Problem

The problem is that the parent element might have other children, and we don’t want to include all their HTML too. And so, here is the long story (one story anyway) of how to get the outer HTML with jQuery.

jQuery outerHTML: Step One

We would first want to create a jQuery object for our target element, having an ID of “container”.

var $target = $('#container");

jQuery outerHTML: Step Two

Next it would be wise to create a copy, or clone, of the element object. That way we don’t risk doing anything on accident to the source element.

var $clone = $target.clone();

jQuery outerHTML: Step Three

Now this line of code is really the point of this example. We will wrap our clone element with a dummy element. This gives it a parent with no other children. Maybe you see where we’re going with this. Note that the parent type isn’t restricted to a div, like I have chosen here, but it’s probably best to chose something without any real special function. Using ‘p’, ‘span’, or even your own ‘xyz’ should all be safe.

$clone.wrap('<div>');

jQuery outerHTML: Step Four

The last part is to call the jQuery html() function on the dummy parent object.

var htmlString = $clone.parent().html();

Mission Accomplished. Yay!

There you have it! One really long explanation of how to do something that could be real simple, like referencing outerHTML on the DOM object. But, I’m a jQuery fanatic, and for good reason. This just happens to be one function that jQuery hasn’t created yet.

Try It Yourself

Here is the source code of a complete working test.

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
 
            function ShowTargetHtml($target){
 
                // Create a copy (clone) that we can work with, so we don't risk messing up the source.
                var $clone = $target.clone();
 
                // Wrap the clone in a dummy element.  The type of element doesn't necessarily matter.
                $clone.wrap('<div>');
 
                // Get the (inner) html contents of the wrapper element.  The contents are the same as the outer html for our target element.
                var htmlString = $clone.parent().html();
 
                // Stick the html string in the text area so we can see the results.
                $('#results').val(htmlString);
 
                // --- An abbreviated version of the code above. ---
                // $('#results').val($target.clone().wrap('<div>').parent().html());
 
            }
 
            $('#cont1Button').click(function(){ ShowTargetHtml($('#container1')); });
            $('#cont2Button').click(function(){ ShowTargetHtml($('#container2')); });    
 
        });
    </script>
</head>
<body>
 
    <button id="cont1Button">Show Container1's Outer HTML</button><br />
    <button id="cont2Button">Show Container2's Outer HTML</button><br />
 
    <textarea id="results" style="width:400px;height:350px;border:solid 1px black;"></textarea>
 
    <div>
 
        <div id="container1">
            <p>
                I am some text inside a 'p' tag.
            </p>
            <span>I am some text inside a 'span' tag.</span>
            <input type="text" name="someinput" value="I am a value inside an input tag." />
        </div>
 
        <div id="container2">
            <div style="color:red;">
                I am some red text.
                <p>
                    I am some red text inside a 'p' tag.
                </p>
            </div>
            <span>I am not red text, but I am in a 'span' tag.</span>
        </div>
 
    </div>
 
</body>
</html>

One Simple Line Of Code

Here is that simple line of code I promised:

var htmlString = $('#targetElementId').clone().wrap('<div>').parent().html();