Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #10164

Re: Cannot write to the DOM

Followups directed to: comp.lang.javascript

Show all headers | View raw

RH wrote:

> I'm a newbie, and just starting to use javascript.

There is no "javascript".  You are using JavaScript, JScript or something 
else, depending on the runtime environment (the browser).  All of them are 
ECMAScript implementations and share most of the syntax elements.

> I've written a small program that simply adds an element to an unordered
> list in the DOM:

The DOM (Document Object Model) is an API.  You are adding an element to the 
_document tree_ instead.
 
> <body>
>    <form>
>       <input type="text" name="filePath" size="100" />
>       <button id="add_button">Add Element</button>
>    </form>
>    <ul id="test"></ul>
>    <script language="JavaScript" type="text/javascript" src="viewer.js">
>    </script>
> </body>
> 
> script in viewer.js:
> 
> window.onload = init();
> 
> function init() {
>    var button = document.getElementById("add_button");
>    button.onclick = create;
> }
> 
> 
> function create() {
>    // create the element in the DOM
>    var listItemViewer = document.getElementById("test");
> 
>    var test = document.createElement("li");
>    test.innerHTML = "test list item";
>    listItemViewer.appendChild(test);
> }
> 
> If I run it and click the add button, it flashes the "test list item" on
> the screen - if I single step it through the debugger, it shows that it
> puts the element in the DOM at the end of the create() function, but then
> it gets stripped out?  Can anyone help me understand why this is
> happening?

Possibility: Because your underlying markup is not Valid [1], there is no 
such `ul' element object in the document tree.  `ul' elements must have a 
child `li' element from the start.  You can either provide it with one in 
the markup, or create the `ul' element and the `li' element with scripting.

You should also avoid using `innerHTML' for appending plain text.  And if 
the button should work only with scripting anyway, you can simply use the 
corresponding attribute (you should avoid `window.onload' anyway).

Consider this:

viewer.js:

  var ul = null;

  function create()
  {
    // create the element in the DOM
    if (!ul)
    {
      ul = document.createElement("ul");
    }

    if (ul)
    {
      var li = document.createElement("li");
      if (li)
      {
        li.appendChild(document.createTextNode("test list item"));
        ul.appendChild(li);
        document.body.appendChild(ul);
      }
    }
  }

In the HTML5 document (it is not Valid HTML4, the `form' element would need 
an `action' attribute there):

  <body>
    <form>
      <input type="text" name="filePath" size="100">
      <button type="button" onclick="create()">Add Element</button>
    </form>
 </body>

Please note that the `button' element has compatibility issues (particularly 
in IE), so for simple buttons you should use `<input type="button" 
value="…">' instead.


HTH

PointedEars
___________
[1] <http://validator.w3.org/>
-- 
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Cannot write to the DOM RH <richkhall@gmail.com> - 2012-01-11 21:20 -0800
  Re: Cannot write to the DOM Tim Streater <timstreater@greenbee.net> - 2012-01-12 09:38 +0000
    Re: Cannot write to the DOM R Hall <richkhall@gmail.com> - 2012-01-12 18:52 -0800
  Re: Cannot write to the DOM "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-01-12 12:06 +0000
  Re: Cannot write to the DOM Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-01-12 13:21 +0100
    Re: Cannot write to the DOM John G Harris <john@nospam.demon.co.uk> - 2012-01-13 17:06 +0000
      Re: Cannot write to the DOM Gene Wirchenko <genew@ocis.net> - 2012-01-13 11:38 -0800
      Re: Cannot write to the DOM Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-01-13 22:23 +0100
        Re: Cannot write to the DOM John G Harris <john@nospam.demon.co.uk> - 2012-01-14 15:49 +0000
          Re: Cannot write to the DOM Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-01-14 17:26 +0100
            Re: Cannot write to the DOM John G Harris <john@nospam.demon.co.uk> - 2012-01-15 14:19 +0000
              Re: Cannot write to the DOM Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-01-15 19:45 +0100
                Re: Cannot write to the DOM John G Harris <john@nospam.demon.co.uk> - 2012-01-16 10:40 +0000
              Re: Cannot write to the DOM Denis McMahon <denismfmcmahon@gmail.com> - 2012-01-15 20:56 +0000
  Re: Cannot write to the DOM Denis McMahon <denismfmcmahon@gmail.com> - 2012-01-12 14:00 +0000
    Re: Cannot write to the DOM Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-01-12 18:32 +0100
  Re: Cannot write to the DOM RobG <rgqld@iinet.net.au> - 2012-01-17 19:26 -0800

csiph-web