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 - https://coursesweb.net/javascript/</p>
</div>

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

/* Result:
JavaScript
 <p>Example innerHTML - https://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 - https://coursesweb.net/javascript/</p>';

/* Result:
 <div id="id1"><p>Example innerHTML - https://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 to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
innerHTML and outerHTML to Get and Replace HTML content

Last accessed pages

  1. Add, Change, and Remove Attributes with jQuery (35999)
  2. Select in MySQL, Output results in HTML Table (3789)
  3. jQuery Drag and Drop Rows between two similar Tables (6875)
  4. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (8371)
  5. Add Pause in JavaScript script (9348)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (443)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (351)
  3. Register and show online users and visitors (319)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (300)
  5. Insert, Select and Update NULL value in MySQL (214)