DOM Compliant "innerHTML" / "innerText" for Netscape 6

also works with IE5+

Although Netscape 6 recognizes innerHTML, it's still worth learning how to achieve the same results using the DOM (Note: Netscape 6+ does NOT support innerText).

This tutorial covers the DOM compliant way to create new "innerHTML" and "innerText". If you're interested in the DOM equivilent of using "innerHTML" and "innerText" to copy existing code, click here to learn about the cloneNode() method.

Click here for the non-DOM compliant version (document.getElementById('test1').innerHTML=document.form1.innerhtmlTest.value).

 

"innerText"

This is the same example used by Doc Javascript, only in place of innerHTML we're using childNodes[] and nodeValue

<div id="counter">Your text will appear here</DIV>
<form>
<input TYPE="text" value="enter some text" name="divValue" id="divValue" size="20">
<input TYPE="button" value="Show Text" onclick="updateMessage()">
</form>
<script language="JavaScript">
<!--

function updateMessage() {
  var x = document.getElementById("divValue").value;
  document.getElementById("counter").childNodes[0].nodeValue = x;
  // - note that for this to work, the div must already have a child node.  
  // - Otherwise, you'll get an error.
}

// -->
</script>

<div id="counter"> </div>

Now try entering some text AND some markup (eg. <b>Howdy!</b>). Notice how the markup is treated like text. The same thing happens when you use document.getElementById('counter').innerText

---------------------------------------------

You can also create text nodes using the createTextNode() and appendChild() methods.

<script>
function createText(){
var newText=document.createTextNode('This is the new text node');
document.getElementById('counter').appendChild(newText);
}
<script>

Click here to create and append a new text node to div id="counter".

This method will add the new text node to the end of any text already in the div. If you want to replace existing text, you'll first need to remove it using the removeChild() method.

So what do you do if you want to include some HTML?

 

"innerHTML"

As I said earlier, you can use document.getElementById('counter').innerHTML with Netscape 6. However, if you want to do it the official W3C way, you'll need to use the method demonstrated below.

What we're going to do is create a table with some text in it using the createElement() and createTextNode() methods and then we're going to put it into a div using the appendChild() method.

<div id="newTable"></div>
<a href="javascript:insertTable()">click here to insert table into div</a>
<script>
function insertTable() {
  var ourDiv=document.getElementById('newTable');
	// - start by creating the table element
  var t=document.createElement('table');  
  // - create a tbody element 
  var tb=document.createElement('tbody');  	
  // - !! YOU MUST INCLUDE THE TBODY TAG FOR THIS EXAMPLE TO WORK IN WIN IE5+ !! 
  t.style.border='2px  ridge';
  t.style.width='200px';
  // - now create the tr and td elements
  var tr=document.createElement('tr');  	
  var td=document.createElement('td');
  td.style.textAlign='right';
  td.style.padding='5px';
  
  // - create the text that will go in the table cell
  var tdText=document.createTextNode('This is the text node');  
  
  // - Now start building the table.  
  // - It's like filling a big container with successively smaller ones, just in reverse

  td.appendChild(tdText);  					// - put the text node in the table cell
  tr.appendChild(td); 						// - put the cell into the row
  tb.appendChild(tr); 						// - put the row into the tbody
  t.appendChild(tb);						// - put the tbody into the table
  ourDiv.appendChild(t); 					// - put the table into the div
}
 </script>

click here to insert table into div

---

PXL8 2004