Member Avatar for nloding

I'm very used to using innerHTML, but it isn't a W3C DOM standard, so I'm trying to work my way out of using it and get to what I feel are better practices with the standard DOM. But I can't figure out how to clear the contents of an element. Here's my situation:

I have the output of a command between <pre> tags. It has the id of "cmd-output". How do I replicate this code using the standard DOM:

<a href="#" onclick="document.getElementById('cmd-output').innerHTML=''; return false;">clear output</a>

All the tutorials and articles I've found so far about ADDING nodes -- not clearing text from a node.

  • 3 Contributors
  • 2 Replies
  • 592 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by langsor
Member Avatar for ~s.o.s~

> All the tutorials and articles I've found so far about ADDING nodes -- not clearing text from
> a node.
Maybe something along the lines of:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Script-Content-Type" content="text/javascript">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Example</title>
    <script type="text/javascript">
    // Error checking omitted for brevity
    function replaceWith(elemId, content) {
      if(!elemId) {
        return;
      }
      var elem = document.getElementById(elemId);
      var newElem = document.createElement("PRE");
      newElem.id = elem.id;
      newElem.appendChild(document.createTextNode(content));
      elem.parentNode.replaceChild(newElem, elem);
    }
    </script>
</head>
<body id="bdy">
  <form id="frm" name="frm" action="#">
    <div>
    <pre id="myPre">SOME CONTENT TO BE REPLACED USING DOM</pre>
    <br><br>
    <input type="button" value="Do it!" onclick="replaceWith('myPre', '');">
    </div>
  </form>
</body>
</html>
Member Avatar for langsor 
<a href="#" onclick="document.getElementById('cmd-output').innerHTML=''; return false;">clear output</a>
<a href="#" onclick="document.getElementById('cmd-output').firstChild.nodeValue=''; return false;">clear output</a>

The difference between the two is that the <pre> tag is not the node that contains the textual data. It has a child node (which is a text-node -vs- an element) which contains the textual data. So we call the <pre> node as you already have with its ID and then reference its firstChild and reference the firstChild's nodeValue . Here we can read and write to that.

I still use innerHTML on occasion, it is well supported cross-browser and doesn't trip over special characters and entities the way using the DOM can for more complex data. It is also handy when you generate your data with PHP on the server and need to plug it in with JavaScript (thus in an Ajax environment).

On a related note, the example provided by s.o.s. is worthy of studying, since it advances towards removing the event calls from being embedded in the links and moving them to a header script function. He might have taken it a step further and tried something like this.

window.onload = function () {
  document.getElementsByTagName('html').item(0).onclick = function ( event ) {
    var action = ( typeof event == 'undefined' ) ? window.event : event;
    var target = ( typeof action.target == 'undefined' ) ? action.srcElement : action.target;
    if ( target.nodeName == '#text' ) { // Safari nodeType 3 work-around
      target = target.parentNode;
    }
    if ( /clear/.test( target.className ) ) {
      if ( rel = target.getAttribute('rel') ) {
        document.getElementById( rel ).firstChild.nodeValue = '';
      }
    }
 // testing document clicks ...
 // alert( ( /^\s+$/.test( target.firstChild.nodeValue ) || target.firstChild.nodeValue == null ) ?  '<' + target.nodeName.toLowerCase() + '> tag' : 'data: ' + target.firstChild.nodeValue );
  };
};

Here we capture all document clicks and isolate the element or node that generated that click. We can then grab some relevant data from that element and take an action accordingly. I stuck in your 'clear' action based on the link element's 'class' and 'rel' attributes, but you can do a lot more with this one simple function.

This is what the calling link would look like for the above code-snippet.

<body>
<pre id="cmd-output">some content goes here</pre>
<a href="#" class="clear" rel="cmd-output">clear output</a>
</body>

Hope this helps

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.