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

Groups > comp.lang.javascript > #26943

Re: How to add list inside a list?

Show key headers only | View raw

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.

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

Thread

How to add list inside a list? justaguy <lichunshen84@gmail.com> - 2015-02-24 14:17 -0800
  Re: How to add list inside a list? justaguy <lichunshen84@gmail.com> - 2015-02-24 18:10 -0800
  Re: How to add list inside a list? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-02-27 01:18 +0100

csiph-web