How to use outerHTML in JavaScript?

Question

How to use outerHTML in JavaScript? Thanks

Answer 1

The outerHTML is the HTML of an element including the element itself. Contrast this with the innerHTML of the element, which is the HTML contained within an elements opening and closing tags. By definition, elements without both opening and closing tags do not have innerHTML.

Use the outerHTML when you want to completely replace an element and its contents. Use innerHTML when you only want to replace the contents of the element.

Answer 2

outerHTML is a non-standard Internet Explorer property of an element. It returns the the html of the element and its child elements. It certain cases it can be set to completely replace an element with an html string.

Answer 3

Maybe look at jQuery and its prepend() and append() functions.

http://api.jquery.com/append/

http://api.jquery.com/prepend/

Should work in all browsers.

Also, this plugin:

http://yelotofu.com/2008/08/jquery-outerhtml/

That should cover getting and setting.

http://api.jquery.com/html/

Will get you contents within an element.

Answer 4

function getHTML(who){
 if(!who || !who.tagName) return '';
 if(who.outerHTML) return who.outerHTML;
 var txt, el= document.createElement("div");
 el.appendChild(who.cloneNode(true));
 txt= el.innerHTML;

 el= null;
 return txt;
}