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>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
innerHTML and outerHTML to Get and Replace HTML content

Last accessed pages

  1. Insert, Select and Update NULL value in MySQL (49138)
  2. Add text between two DIV tags (1543)
  3. Volume and Surface Area Calculator for 3D objects (8467)
  4. Get data from string with JSON object (1850)
  5. Contact page - CoursesWeb (36848)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2405)
  2. Contact page - CoursesWeb (2307)
  3. Tabs effect with CSS (2295)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (903)
  5. PHP getElementById and getElementsByTagName (854)