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:
<div id="id1">JavaScript
 <p>Example innerHTML - http://coursesweb.net/javascript/</p>
</div>

<script>
var cnt = document.getElementById('id1').innerHTML;
alert(cnt);

/* Result:
JavaScript
 <p>Example innerHTML - http://coursesweb.net/javascript/</p>
*/
</script>
2. Syntax, add /replace content with innerHTML:

element.innerHTML = 'HTML content';

- Example:
<div id="id1">JavaScript</div>

<script>
document.getElementById('id1').innerHTML = '<p>Example innerHTML - http://coursesweb.net/javascript/</p>';

/* Result:
 <div id="id1"><p>Example innerHTML - http://coursesweb.net/javascript/</p></div>
*/
</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:
<div id="id2">JavaScript
 <p>Example outerHTML - CoursesWeb.net/javascript/</p>
</div>

<script>
var cnt = document.getElementById('id2').outerHTML;
alert(cnt);

/* Result:
<div id="id2">JavaScript
 <p>Example outerHTML - CoursesWeb.net/javascript/</p>
</div>
*/
</script>
2. Syntax, add /replace content with outerHTML:

element.outerHTML = 'HTML content';

• The difference between innerHTML and outerHTML is that outerHTML replace the element itself with the new content.
- Example:
<div id="id1">
 <div id="id2">JavaScript</div>
</div>

<script>
document.getElementById('id2').outerHTML = '<p>Example outerHTML - CoursesWeb.net/javascript/</p>';

/* Result:
<div id="id1">
 <p>Example outerHTML - CoursesWeb.net/javascript/</p>
</div>
*/
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
innerHTML and outerHTML to Get and Replace HTML content

Last accessed pages

  1. Dodge Ball (2973)
  2. jQuery Drag and Drop Rows between two similar Tables (6738)
  3. Basic HTML elements (3681)
  4. Sport Games (12516)
  5. JQZoom Image Magnifier (9297)

Popular pages this month

  1. Flash Games - Free online Games (1536)
  2. Qwop (1269)
  3. Tunnel Rush (1133)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (1092)
  5. Drag Racer V3 (823)