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 defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
innerHTML and outerHTML to Get and Replace HTML content

Last accessed pages

  1. Get the value of the selected /checked checkboxes in a form (42018)
  2. SHA1 Encrypt data in JavaScript (14279)
  3. Inheritance - Parent class and Child class (2448)
  4. querySelector and querySelectorAll (12508)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (46947)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1584)
  2. Contact page - CoursesWeb (1547)
  3. Tabs effect with CSS (1541)
  4. PHP getElementById and getElementsByTagName (749)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (624)