Path: csiph.com!usenet.pasdenom.info!weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: How to add list inside a list?
Date: Fri, 27 Feb 2015 01:18:37 +0100
Organization: PointedEars Software (PES)
Lines: 98
Message-ID: <4086793.vzmihnAVs8@PointedEars.de>
References: <087687a9-5169-4535-b5f4-e9d7f3677546@googlegroups.com> <sublist-20150225000855@ram.dialup.fu-berlin.de>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: 8Bit
X-Trace: solani.org 1424996397 25431 eJwNyckRwEAIA7CWwmGYlONdcP8lJPoKUVa3s1AJQfQFg83jD/qmz7txPGR/J6WZ2WF7CmOFDy4uEeM= (27 Feb 2015 00:19:57 GMT)
X-Complaints-To: abuse@news.solani.org
NNTP-Posting-Date: Fri, 27 Feb 2015 00:19:57 +0000 (UTC)
User-Agent: KNode/4.14.2
X-User-ID: eJwFwYEBwCAIA7CXAG0L5yjM/09YgkVnaxPceHjzZZ5z46n8TucpOtos3WADIidn4dMadbdXVWhXXJKK0g9XTBTF
Cancel-Lock: sha1:8Ky82Nlet+BbbN0KUthZlmcmccw=
X-NNTP-Posting-Host: eJwFwQEBwDAIAzBLrEA7O5yBfwlP0nnYCiYjN3dQH+LexRs1ZIezFQJXpOAj5Xq/MRYsfxz5ENk=
Xref: csiph.com comp.lang.javascript:26943

Stefan Ram wrote:

> justaguy <lichunshen84@gmail.com> writes:
>>add a new list inside an element of an existing list
> 
>   Main.html
> 
> <!DOCTYPE HTML><html><head><meta charset="UTF-8">
> <title>Main</title><link rel="stylesheet"
> href="main.css"></head><body><ol> <li id="food">Food</li>
> <li>Drinks</li></ol>
> <script type="application/javascript;version=1.8" src="main.js"></script>
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Utter nonsense.

> </body></html>
> 
>   main.css

Pointless.

>   main.js
> 
> "use strict";
> 
> function insertSublist()
> { "use strict";
>   document.getElementById( "food" ).
>   appendChild( document.createElement( "ol" )).
>   innerHTML = "<li>muffin</li><li>pizza</li>" ; }

I have hardly ever seen a less readable piece of source code before.  Get 
yourself some *widely accepted* code guidelines if you want to be taken 
seriously.

It is also one that does not work everywhere: In the MSHTML DOM, 
appendChild() does not always return a reference to the object
representing the appended child element.  So it should be at least:

  var food = document.getElementById("food");
  var list = document.createElement("ol");
  list.innerHTML = "<li>muffin</li><li>pizza</li>";
  food.appendChild(list);

This is also the recommended order of statements because it prevents reflow 
as the element is not inserted before its content is defined.

> function onDOMContentLoaded()
> { "use strict";
>   insertSublist(); }
> 
> function wireDOMContentLoaded()
> { "use strict";
>   document.addEventListener
>   ( "DOMContentLoaded", onDOMContentLoaded, false ); }
> 
> wireDOMContentLoaded();

There is no good reason for risking name collisions in the global namespace 
by declaring wireDOMContentLoaded() and onDOMContentLoaded() global 
functions.  Both functions can be inlined without loss of backwards 
compatibility:

  /* global code */
  document.addEventListener("DOMContentLoaded", function () {
    insertSublist();
  }, false);

In fact, in this case you can simply write

  document.addEventListener("DOMContentLoaded", insertSublist, false);

because insertSublist() does not use its first argument; and finally

  document.addEventListener("DOMContentLoaded", function () {
    var food = document.getElementById("food");
    var list = document.createElement("ol");
    list.innerHTML = "<li>muffin</li><li>pizza</li>";
    food.appendChild(list);
  }, false);

by which insertSublist() becomes superfluous as well, clearing the global 
namespace of three superfluous symbols, and the respective call stacks of up 
to two superfluous items, in total.

However, the proper event type is “load”.  At least, “load” should also be 
used (with a flag so that duplicate addition is prevented) for backwards 
compatibility.  That is, iff this should be done on load, which was not even 
the question here.

Finally, when globally in strict mode, it is superfluous to write the strict 
mode declaration in each function.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.