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

Groups > comp.lang.javascript > #26925 > unrolled thread

How to add list inside a list?

Back to article view | Back to comp.lang.javascript

Contents

  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

#26925 — How to add list inside a list?

Hi,

I wonder if there's a way to add sublist to a list.  The technique I'm using now for adding a list to an iframe is via execCommand and the command of "InsertOrderedList" for an ordered list.  What I intend to go further is, to be able to add a new list inside an element of an existing list, hence, it may look like this:
1. Food
  1.1 muffin and orange juice for breakfast
  1.2 pizza and milk for lunch
      some snack in the mid afternoon
  1.3 seafood for dinner
      1.3.1. Mussels
      1.3.2. Salmon
      1.3.3. Crabs
  Please note, the above 1.1 could be replaced by (a) or [a], the key is to retain the indent.

2. Drinks
3. Sleep

So, the question is how to be able to add 1.1 and 1.2 and 1.x etc. under 1. root list element and then even one more level deeper (1.3.1; 1.3.x)?

The following URL entails the current code,
http://69.195.124.99/~knowleo9/dev/newdev.html

Thanks in advance.

[toc] | [next] | [standalone]

#26927

On Tuesday, February 24, 2015 at 6:10:58 PM UTC-5, 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>
> </body></html>
> 
>   main.css
> 
>   main.js
> 
> "use strict";
> 
> function insertSublist()
> { "use strict"; 
>   document.getElementById( "food" ).
>   appendChild( document.createElement( "ol" )).
>   innerHTML = "<li>muffin</li><li>pizza</li>" ; }
> 
> function onDOMContentLoaded()
> { "use strict";
>   insertSublist(); }
> 
> function wireDOMContentLoaded()
> { "use strict"; 
>   document.addEventListener
>   ( "DOMContentLoaded", onDOMContentLoaded, false ); }
> 
> wireDOMContentLoaded();

Thank you very much for your method of solving this problem.

Sorry, I wasn't clear, that is, the content in a given iframe is unknown to us, hence, we don't know if an element from the parent list is "food" or something else, same is true for "muffin" etc.  And I don't think we have an id for each element neither.  Is it still solvable?

[toc] | [prev] | [next] | [standalone]

#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.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web