innerHTML and outerHTML to Get and Replace HTML content

Get and Replace HTML content with outerHTML

Get and Replace HTML content with innerHTML

innerHTML is a JavaScript property that can be used to get the HTML content added into a HTML element in web page, and also it can be used to replace the content into a HTML element with other content.

1. Syntax, get content with innerHTML:

var content = element.innerHTML;

- Example, adds the content of a Div in a textarea:

<div id='id1'>JavaScript
 <p>Example innerHTML - https://coursesweb.net/javascript/</p>
</div>
<p>If you click on the following button, it adds in textarea the content of the HTML element with id 'id1'.</p>
<button id='btn1'>Try it</button><br>
<textarea id='txta' cols='40' rows=4'></textarea>

<script>
var txta = document.getElementById('txta');

document.getElementById('btn1').addEventListener('click', (ev)=>{
 var cnt = document.getElementById('id1').innerHTML;
 txta.value = cnt;
});
</script>

2. Syntax, add /replace content with innerHTML:

element.innerHTML = 'HTML content';

- Example, replaces the content of a Div:

<div id='id1'>Div - JavaScript</div>
<p>If you click on the following button, it replaces the content of the Div above.</p>
<button id='btn1'>Try it</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('id1').innerHTML ='<p>Example innerHTML - https://coursesweb.net/javascript</p>';
});
</script>

Get and Replace HTML content with outerHTML

outerHTML is a JavaScript property that can be used to get the string with a HTML element, including its tag, attributes and child elements, also it can replace a HTML tag (including its content) with other HTML content.

1. Syntax, get HTML content with outerHTML:

var content = element.outerHTML;

The difference between innerHTML and outerHTML is that the innerHTML gets the content added into a HTML element, but the outerHTML gets also the tag and attributes representing that element.

- Example, adds the string with a HTML element in a textarea:

<div id='id1'>JavaScript
 <p>Example outerHTML - CoursesWeb.net/javascript</p>
</div>
<p>If you click on the following button, it adds in textarea the HTML element with id 'id1'.</p>
<button id='btn1'>Try it</button><br>
<textarea id='txta' cols='40' rows=4'></textarea>

<script>
var txta = document.getElementById('txta');

document.getElementById('btn1').addEventListener('click', (ev)=>{
 var cnt = document.getElementById('id1').outerHTML;
 txta.value = cnt;
});
</script>

2. Syntax, add /replace content with outerHTML:

element.outerHTML = 'HTML content';

The difference between outerHTML and innerHTML is that outerHTML replace the element itself with the new content.

- Example, replaces a Div with another HTML tag:

<div id='id1'>Div
 <div id='id2'>JavaScript</div>
</div>
<p>If you click on the following button, it replaces the the Div above with a H4 element.</p>
<button id='btn1'>Try it</button>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('id1').outerHTML ='<h4>Example outerHTML - https://coursesweb.net/javascript</h4>';
});
</script>

<<-Download JavaScript resources -- insertAdjacentHTML - Insert content ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which type of <input> creates a color well control for selecting a color value?

type="text" type="color" type="date"

<input type="color" name="get_color" />

Which CSS method rotates the HTML element at a given degree?

scale() translate() rotate()

#some_id:hover {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);    /* IE 9 */
  -moz-transform: rotate(60deg);   /* Firefox */
}

Click on the function that returns the number with the highest value.

pow() min() max()

var maxn = Math.max(8, 4, 88, 56);
alert(maxn);      // 88

Which function prevent the same file from being included more than once in a page?

include() include_once() require()

include_once("some_file.php");