Difference between innerHTML and outerHTML in JavaScript

innerHTML

The Element property innerHTML gets or sets the HTML or XML markup contained within the element.
Setting the value of innerHTML lets you easily replace the existing contents of an element with new content.
HTML5 specifies that a <script> tag inserted with innerHTML should not execute.
It is recommended you should not use innerHTML when inserting plain text; instead, use textContent.

outerHTML

The outerHTML is the HTML of an element including the element itself. 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.

What is the difference between innerText and outerText?

The innerText property works similarly to the innerHTML property, except that it is focused solely on the textual content contained within an element. The innerText property sets or returns the text content of the specified node, and all its descendants. If you set the innerText property, any child nodes are removed and replaced by a single Text node containing the specified string. This feature was originally introduced by Internet Explorer and was formally specified in the HTML standard in 2016 after being adopted by all major browser vendors. To set or return the HTML content of an element, use the innerHTML property.

outerText

outerText property works similarly to the outerHTML property, modifies the element itself, and replaces it with a single text node. This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user.

Tagged : / / / / / /
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x