Path: csiph.com!x330-a1.tempe.blueboxinc.net!usenet.pasdenom.info!weretis.net!feeder4.news.weretis.net!newsfeed.straub-nv.de!noris.net!newsfeed.arcor.de!newsspool2.arcor-online.net!news.arcor.de.POSTED!not-for-mail
Content-Type: text/plain; charset="UTF-8"
Message-ID: <1933115.aqSPkdTlGX@PointedEars.de>
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Organization: PointedEars Software (PES)
Date: Thu, 12 Jan 2012 13:21:37 +0100
User-Agent: KNode/4.4.11
Content-Transfer-Encoding: 8Bit
Subject: Re: Cannot write to the DOM
Newsgroups: comp.lang.javascript
References: <3437926.47.1326345632135.JavaMail.geo-discussion-forums@yqiq10>
Followup-To: comp.lang.javascript
MIME-Version: 1.0
Lines: 109
NNTP-Posting-Date: 12 Jan 2012 13:21:37 CET
NNTP-Posting-Host: 5657beba.newsspool4.arcor-online.net
X-Trace: DXC=k6]JCQT@40Ij7E:bke<5HF4IUK<Cl32<A4Fo<]lROoRA8kF<OcfhCOK?F<P;FJ26_BDZm8W4\YJNLUFDj8T]K0?CDmniOZG;K0KNA=C`GBUI^H
X-Complaints-To: usenet-abuse@arcor.de
Xref: x330-a1.tempe.blueboxinc.net comp.lang.javascript:10164

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