JavaScript outerHTML with Example

In this tutorial, I will tell you about outerHTML in javascript. outerHTML provides developers with a lot of power. By this property, you can get whole element value with its HTML Like this:

It is a valid string comprising a combination of text and tags.

There are other properties that can also be used to get the contents of an element such as innerText, innerHTML etc. But outerHTML returns the full HTML code for the element,including the element itself.

This property is not working on some HTML elements such as html, head, body, frameSet, tBody.  When the property is set, the given string simply substitutes the object, including its start and end tags.

Example:

outerHTML overwrites the element, while innerHTML replaces all children but not the element itself. If there are event handlers on the element, outerHTML also deletes the event handlers.

It is a property of dom/HTMLElementdom/HTMLElement.

Example:

You can use outerHTML as a wrapper.

Example:

As we see in the above code outerHTML is the content of an element together with the element itself, outerHTML is working as a wrapper. For example, if an element or an entire part is to be packed into a div element.

One thought on “JavaScript outerHTML with Example

  1. Anuj Joshi

    Neeraj, Very great article! I am happy that you shared this small tutorial on Javascript OuterHTML. You have explained and coded it greatly. I would like to try it out for a once. Well, Thanks for sharing.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *