Asp Forum - How to add list inside a list?

knowledgenotebook

2/24/2015 10:17:00 PM

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/n...

Thanks in advance.

3 Answers

ram

2/24/2015 11:11:00 PM

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();

knowledgenotebook

2/25/2015 2:10:00 AM

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?

Thomas 'PointedEars' Lahn

2/27/2015 12:19:00 AM

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.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

comp.lang.javascript

How to add list inside a list?

knowledgenotebook

ram

knowledgenotebook

Thomas 'PointedEars' Lahn

x Login to ForumsZone