innerHTML and compatibility

innerHTML is a property of any HTML element which has for value the content that is between the opening tag and ending tag.

In the example below, innerHTML has the value "a text":

<p>
a text
</p>

It is used to get or insert dynamically content in a page. Beyond the insertion of simple text, there might be differences in its operation in browsers.

It was first implemented in Internet Explorer 5 and then picked up by every browser. Since HTML 5, it is part of the standard and is now a property of HTMLElement and HTMLDocument.

Using innerHTML

Here is a simple paragraph:

<p id="pid">
  a text.
</p>

We can get the contents of the paragraph with this code:

var x = document.getElementById("pid");
alert(x.innerHTML);

We can dynamically replace the contents of the paragraph with this code:

var x = document.getElementById("pid");
x.innerHTML = "another text";

Demonstration below:

a text

The paragraph contains at the start "<i>text</ i>" replaced by " <i>another text</ i>" when you click on the button.

It is thus possible to replace the contents of any tag, and insert a code more complex than a simple string, with nested tags.

Demonstration: Inserting dynamic content into a page

In the demonstration, you can insert an image into the page by inserting a <img> tag in the source code or more complex code.

A content defined by yourself is inserted below the form.

For example, make a copy/paste the following code:
<img src="https://www.xul.fr/images/apricot.jpg" />.

Interactive form

Your content
To be inserted here .

The HTML code: 

<fieldset><legend>Your content</legend>
   <div id="storage">To be inserted here .
   </div>
</fieldset>

The JavaScript code: 

<script>
function generation(storageid, fieldid)
{
  var x = document.getElementById(storageid);
  var y = document.getElementById(fieldid);
  x.innerHTML = y.value;
}
</script>

HTML 5

HTML 5 standardizes two new attributes, innerHTML and outerHTML.

The two attributes are used to read the contents of a tag or the entire document. They can replace the contents of a tag or add new content.

Difference between innerHTML and outerHTML

The outerHTML attribute like innerHTML applies to a page element, a tag. But outerHTML represents both the element and its content, while innerHTML represents only the content.

outerHTML can be used to return the contents of the entire document but not to replace the entire document.
More clearly, we can write document.innerHTML="" but not document.outerHTML = "".

DOM equivalent methods

We can solve compatibility problems by using methods for manipulating the Document Object Model.

Creating an element, a picture for example:

var x = document.createElement('img');

Assigning attributes, in this case, since it's an image, an URL to the source:

x.src="https://www.xul.fr/images/maurice.jpg";

Attach the new code to an existing tag:

var t = document.getElementById("storage");
t.appendChild(x);

This code is inserted into the page. The result:

The complete code:


<script>
function insertImg()
{
  var x = document.createElement('img');
  x.src="https://www.xul.fr/images/maurice.jpg";  
  var t = document.getElementById("storage");
  t.appendChild(x); 
}
window.onload=insertImg;
</script>

<p id="storage"></p>

To insert a text we use another method:

document.createTextNode("a text');

And to integrate multiple nested elements, we use appendChild, either on the parent, to add a first or more childs, or to a child.

var t = document.getElementById("storage");
t.appendChild(x);
t.appendChild(document.createTextNode('Bunch of grapes'));

Démonstration

Code to insert:

<div align="center">
<img src="https://www.xul.fr/images/grape.jpg" />
<br>
Bunch of grapes
</div>

I may be inserted directly through innerHTML.

The code to create the demo with DOM methods uses the following steps:

  1. Creating a layer.
  2. It is assigned an attribute of alignment.
  3. Creating an image tag.
  4. We assign to the src attribute the URL of an image.
  5. Was added that tag as child of the layer.
  6. A new child is added, a <br> tag.
  7. Then a text is created and added to the other two childs.

The complete code:

function insertText()
{
  var layer = document.createElement('div');
  layer.align="center";
  var img = document.createElement('img');
  img.src="https://www.xul.fr/images/grape.jpg";  
  var storage = document.getElementById("storage2");
  storage.appendChild(layer);
  layer.appendChild(img); 
  layer.appendChild(document.createElement('br'));
  layer.appendChild(document.createTextNode('Bunch of grapes'));
}

function inserts()
{
  insertImg();
  insertText();
}

window.onload=inserts;

See also

© 2010-2022 Xul.fr