www.webdeveloper.com
Results 1 to 6 of 6

Thread: HTML Dom help.. What to use instead of innerHTML

Hybrid View

  1. #1
    Join Date
    May 2012
    Posts
    5

    HTML Dom help.. What to use instead of innerHTML

    I am reluctant to use 'innerHTML' to modify #textNodes as it is not a part of the W3C DOM specification. I am aware that it is supported by all major browsers. I am not here to discuss my reasoning for why I have decided this. I am simply here to go over an alternate method of reaching the desired result.

    Here is my HTML code: HTML Code Here
    Javascript code: Javascript Here

    Now I have replaced the following code:
    function test_function() {
    say = 'You successfully entered text here using innerHTML'
    document.getElementById('text_area').innerHTML = (say)
    }
    With the following code:
    function test_function() {
    say = 'You successfully entered text here using innerHTML'
    document.getElementById('text_area').childNodes[0].nodeValue = (say)
    }
    As far as I'm aware, the paragraph with 'id="text_area" is the parent of the #textNode. I don't understand why the above code will not edit the #textNodes contents

    I am new to web development so forgive me if i am missing something simple here.

    Regards

  2. #2
    Join Date
    Nov 2010
    Posts
    1,090
    it would appear that, as your tags are closed up:
    Code:
    <p id="text_area"></p>
    no node exists for that element. in other browsers you can fix this by adding just one space:
    Code:
    <p id="text_area"> </p>
    but IE requires a non-breaking space for the text node to be created:
    Code:
    <p id="text_area">&nbsp</p>
    that way, a node exists in the dom and a value can be set to it, the way you have it coded, with one small modification:
    Code:
    function test_function() {
    say = 'You successfully entered text here using innerHTML'
    document.getElementById('text_area').childNodes[0].nodeValue=say;
    }

  3. #3
    Join Date
    May 2012
    Posts
    5
    Quote Originally Posted by xelawho View Post
    it would appear that, as your tags are closed up:
    Code:
    <p id="text_area"></p>
    no node exists for that element. in other browsers you can fix this by adding just one space:
    Code:
    <p id="text_area"> </p>
    but IE requires a non-breaking space for the text node to be created:
    Code:
    <p id="text_area">&nbsp</p>
    that way, a node exists in the dom and a value can be set to it, the way you have it coded, with one small modification:
    Code:
    function test_function() {
    say = 'You successfully entered text here using innerHTML'
    document.getElementById('text_area').childNodes[0].nodeValue=say;
    }
    Thank you xelawho, this is exactly what I was looking for!.

    Thanks to the other who took the time to help also.. nice forum, I will be using it more from now on

    Regards

  4. #4
    Join Date
    Apr 2012
    Posts
    55
    I very rarely ever use innerHTML, and then it's only to accomplish something that can't be done without other DOM methods. What you want is definitely doable.

    Code:
    function test_function() {
    var say = 'You successfully entered text here *without* using innerHTML';
    var newTextNode = document.createTextNode(say);
    document.getElementById('text_area').appendChild(newTextNode);
    }
    joi JavaScript Framework provides some sugar for making changes to the DOM to make your life easier, and it uses these types of DOM methods behind the scenes (instead of innerHTML). So you could also consider using joi:

    Code:
    function test_function() {
    var say = 'You successfully entered text here *without* using innerHTML';
    joi.get('text_area').setText(say);
    }
    Last edited by nathanwall; 05-12-2012 at 04:46 PM.

  5. #5
    Join Date
    Nov 2010
    Posts
    1,090
    the problem with creating and appending a new child is that every time that button is clicked it will create and append another. Which may be what you want. But if not, you can test to see if it exists - if it doesn't, create it. And if it does, change its value:

    Code:
    function test_function() {
    say = 'You successfully entered text here *without* using innerHTML'
    p=document.getElementById('text_area')
    if(!p.firstChild){
    p.appendChild(document.createTextNode(say));
    }else {
    p.firstChild.nodeValue=say;
    	}
    }

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,656
    wot zei a tolkin ebaut?!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles