jQuery - OuterHTML

Unlike .html() that returns only the element's HTML content, .outerHTML() returns the selected element and its HTML content or replaces it as .replaceWith() method but with the difference that allows the replacing HTML to be inherit by the chaining. This version introduces support to replace a set of matched elements by DOM Elements and jQuery objects. It also introduces the support to .outerHTML( function ). Check Notes of the Version for more details.

Support me through your donation

Download

Download outerHTML-2.1.0.zip (v2.1.0)

.outerHTML()

Get the HTML of the first element and with its contents in the set of matched elements. Check how to getouterHTML for a set of elements.

Consider the following set of elements and the outerHTML call:

    <div>I am DIV one</div>
    <div>I am DIV two</div>
    <div>I am DIV three</div>
    
    <button id="whoAreYou">Who are you?</button>
    $("#whoAreYou").click(function(){
    
    	alert($("div").outerHTML());
        
    });

Click on the button to see the result

This method uses the browser's outerHTML property that is available for most of the popular browsers except Firefox. When the property is not available, the element is cloned using the browser's cloneNode or jQuery's clone, appended to a temporary node and the innerHTML is got from there.

.outerHTML( newContent )

newContent
(HTML string | DOM Element | jQuery object)(optional) The replacing content. May be an HTML string, DOM element, or jQuery object.

Get the set of matched elements and replace them by the new content and returns the set of replacing elements.

Consider the following set of elements and the outerHTML call:

    <div>
    	<span>First link</span>
    </div>
    <div>
    	<span>Second link</span>
    </div>
    <div>
    	<span>Third link</span>
    </div>
    
    <button id="transform">Transform to link</button>
   	$("#transform").click(function(){
    	
        var replacingContent = "<a hre='#'>Replace span for a link</a>";
        
    	$("span").outerHTML(replacingContent);
        
    });

.outerHTML( function(index, outerHTML) )

function
(Function)(optional) A function that returns content with which to replace the set of matched elements.

Get the set of matched elements and return them in a function as including their index the their outerHTML

Consider the following set of links being replaced to become an span but preserving the oringinal text contet:

    <div>
    	<a hre="#">Google</a>
    </div>
    <div>
    	<a hre="#">Yahoo</a>
    </div>
    <div>
    	<a hre="#">MSN</a>
    </div>
    
    <button id="transformLinkToSpan">Transform link to spank</button>
    $("#transformLinkToSpan").click(function(){
					
        $("a").outerHTML(function(index, outerHTML){
			
            var $this = $(this),
                textContent = $this.text();
				
            $this.outerHTML("<span>" + textContent + "</span>");
			
        });
											 
    });

Replace elements with jQuery .outerHTML() and not loose the chaining

When using .replaceWith(), the replacing content doesn't keep the chaining. .outerHTML() replaces and chain the new elements.

    <div>
    	<span>My link</span>
    </div>
    
    <button id="bindEventAfterReplace">Replace and bind event</button>
    $("#bindEventAfterReplace").click(function(){
					
        $("span")
        	.outerHTML("<a href='#'>Click on me</a>")
            .click(function(){
            
            	alert($(this).outerHTML());
                
                return false;
            
            });
											 
    });
My link

How to get outerHTML for a set of elements

    <div>
    	<span>My first span</span><br/>
        <span>My second span</span><br/>
        <span>
        	<span>My third span as a child</span>
        </span>
    </div>
    
    <button id="getOuterHTML">outerHTML for the set of elements</button>
    $("#getOuterHTML").click(function(){
		
        var wholeOuterHTML = "";
            		
        $("span").outerHTML(function(index, outerHTML){
        
        	wholeOuterHTML = wholeOuterHTML + outerHTML;
        
        });
        
        alert(wholeOuterHTML);
											 
    });
My first span
My second span
My third span as a child

Notes of the Version

  • Fix replacing for multiple matched elements
  • Add support to replace matched elements with DOM Elements and jQuery object
  • Use of the browser's properties outerHTML and cloneNode when available to improve preformance
  • Introduce the support to function as parameter

Suggestions and Bugs Reporting

Please don't be shy if you have any suggestion or a problem to report. Go to my contact page and help me to improve.

Recommend this page