Creating UL dynamically

I am trying to figure out how to create an <UL> dynamically. What I was hoping to do is have three buttons.

1. to create a new li
2. to create a new <ul><li> inside of a <li> for a sub category
3. to delete be able to have a checkbox next to each <li> so I can check and delete a sepcific one if I need to after I created them..
4. I need to be able to choose what type of object will be inserted between the <li> tags when the <li> is created...

Any help would be great..thanks
brad0525Asked:
Who is Participating?
 
HonorGodSoftware EngineerCommented:
Check this out...
<html>
<head>
<title> Dynamic LI creation </title>
<script type='text/javascript'>
  function field( id ) {
    var ele = document.getElementById( id );
    if ( !ele ) {
      alert( 'Specified element not found. id="' + id + '".' );
    }
    return ele;
  }

  // insert newNode after oldNode
  function insertAfter( newNode, oldNode ) {
    oldNode.parentNode.insertBefore( newNode, oldNode.nextSibling );
  }

  function addHere( where ) {
    var source = field( 'source' );
    if ( where && source ) {
      var data = source.value;
      if ( data.length > 0 ) {
        var info = data.split( '\n' );
        var ul = document.createElement( 'UL' );
        insertAfter( ul, where );
        for ( var i = 0; i < info.length; i++ ) {
          var li  = document.createElement( 'li' );
          var a   = document.createElement( 'a' );
          a.href = '#';
          a.innerHTML = info[ i ];
          a.onclick = function( that ) {
            return function() {
              addHere( this );
              return false;
            }
          }(this);
          li.appendChild( a );
          ul.appendChild( li );
        }
        var button = field( 'button' );
        if ( button ) {
          button.disabled = true;
        }
        source.value = '';
      } else {
        alert( 'Please provide some data.');
      }
    }
  }

  function doit() {
    var where  = field( 'here' );  // Initial insertion point
    if ( where ) {
      addHere( where );
    }
  }
</script>
</head>
<body>
 
<div id='here'></div> 
<input type='button' id='button' value='Insert' onclick='doit()'><br />
<textarea id='source' rows='10' cols='10'></textarea>

</body>
</html>

Open in new window

0
 
HonorGodSoftware EngineerCommented:
So you want to go from something like this:

<ul>
  <li>One</li>
  <li id='here'>Two</li>
  <li>Three</li>
</ul>

To this:

<ul>
  <li>One</li>
  <li id='here'>Two</li>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  <li>Three</li>
</ul>
0
 
brad0525Author Commented:
Yea, basically. I need it to be able to make something like the below code. But I need to add each one dynamically and have the ability to delete or add back in if needed..thanks
<ul>
  <li>item</li>
  <li>item
    <ul>
	  <li>item</li>
	  <li>item</li>
	  <li>item
	    <ul>
		  <li>item1</li>
		  <li>item1 
          <ul>
		  <li>item1</li>
		  <li>item1
          
          
          </li></ul>
          
          
          </li>
		</ul>
	  </li>
	</ul>
  </li>


</ul>

Open in new window

0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
HonorGodSoftware EngineerCommented:
What you have isn't valid.

For example:
<ul>
  <li>item</li>
  <li>item
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item                          // Missing "</li>"
        <ul>
          <li>item1</li>
          <li>item1                     // Missing "</li>"
            <ul>                        // Is this supposed to be nested?
              <li>item1</li>
              <li>item1
              </li>
            </ul>
          </li>                         // Ah, this "nested" ul isn't between <li> and </li>
        </ul>
      </li>                          // Again, this is at the wrong place
    </ul>
  </li>                              // Again, wrong place
</ul>

Open in new window

0
 
HonorGodSoftware EngineerCommented:
This is the proper syntax
<ul>
  <li>item</li>
  <li>item</li>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
        <ul>
          <li>item 1</li>
          <li>item 2</li>
            <ul>
              <li>item A</li>
              <li>item B</li>
            </ul>
        </ul>
    </ul>
</ul>

Open in new window

0
 
brad0525Author Commented:
Yea, sorry I did write that incorrectly...Do you know how it can be created so that these items can be created dynamically?
0
 
HonorGodSoftware EngineerCommented:
For example:
<html>
<body>

<ul>
  <li>A</li>
  <li>B</li>
    <ul>
      <li>B 1</li>
      <li>B 2</li>
      <li>B 3</li>
        <ul>
          <li>B 3.1</li>
          <li>B 3.2</li>
            <ul>
              <li>B 3.2.1</li>
              <li>B 3.2.2</li>
            </ul>
        </ul>
    </ul>
</ul>


</body>
</html>

Open in new window

0
 
HonorGodSoftware EngineerCommented:
Looking.  I'm "almost there" ;-)
0
 
brad0525Author Commented:
Ok great...thanks
0
 
HonorGodSoftware EngineerCommented:
Kind of like this?
<html>
<head>
<title> Dynamic LI creation </title>
<script type='text/javascript' src='../../objDisplay.js'></script>
<script type='text/javascript'>
  function field( id ) {
    var ele = document.getElementById( id );
    if ( !ele ) {
      alert( 'Specified element not found. id="' + id + '".' );
    }
    return ele;
  }

  function nextLI( referenceNode ) {
    var obj = referenceNode.nextSibling;
    while ( obj && obj.nodeName != 'LI' ) {
      obj = obj.nextSibling;
    }
    return obj;
  }

  function doit( id ) {
    var where = field( id );
    if ( where ) {
      var ul = document.createElement( 'UL' );
      where.parentNode.insertBefore( ul, nextLI( where ) );
      var info = 'Mon,Tue,Wed'.split( ',' );
      for ( var i = 0; i < info.length; i++ ) {
        var li = document.createElement( 'li' );
        li.appendChild( document.createTextNode( info[ i ] ) );
        ul.appendChild( li );
      }
    }
  }
</script>
</head>
<body>
 
<ol compact>
  <li>Uno</li>
  <li id='here'>Dos</li>
  <li>Tres</li>
</ol>
<input type='button' value='Insert' onclick='doit("here")'>

<div id='debug'></div>
</body>
</html

Open in new window

0
 
HonorGodSoftware EngineerCommented:
You don't need the

<script type='text/javascript' src='../../objDisplay.js'></script>


I just use that to help me debug.
0
 
brad0525Author Commented:
OK well that is kinda right, but not exactly what I need. I need to be able to create the

 <li>Uno</li>
  <li id='here'>Dos</li>
  <li>Tres</li>


dynamically too...I also need to be able to choose which li I will be adding a ul to.
0
 
HonorGodSoftware EngineerCommented:
ok, to do the initial insertion / creation I was able to use this.

The question remains:

Q: How do you want to define the insertion point, and the LI values to be used?
<html>
<head>
<title> Dynamic LI creation </title>
<script type='text/javascript'>
  function field( id ) {
    var ele = document.getElementById( id );
    if ( !ele ) {
      alert( 'Specified element not found. id="' + id + '".' );
    }
    return ele;
  }

  // insert newNode after oldNode
  function insertAfter( newNode, oldNode ) {
    oldNode.parentNode.insertBefore( newNode, oldNode.nextSibling );
  }

  function nextLI( referenceNode ) {
    var obj = referenceNode.nextSibling;
    while ( obj && obj.nodeName != 'LI' ) {
      obj = obj.nextSibling;
    }
    return obj;
  }

  function doit() {
    var where = field( 'here' );  // Initial insertion point
    if ( where ) {
      var ul = document.createElement( 'UL' );
      insertAfter( ul, where );
      var info = 'Uno,Dos,Tres'.split( ',' );
      for ( var i = 0; i < info.length; i++ ) {
        var li = document.createElement( 'li' );
        li.appendChild( document.createTextNode( info[ i ] ) );
        ul.appendChild( li );
      }
    }
  }
</script>
</head>
<body>
 
<div id='here'></div> 
<input type='button' value='Insert' onclick='doit()'>

</body>
</html>

Open in new window

0
 
brad0525Author Commented:
Ok so we are getting a little closer. Right now it seems as thought it is creating a new UL everytime we click insert. I need it to create a new UL intiailly but have the ability to insert a LI or beign a new UL. Also I only need one <li> at a time.

The insertion point should be right after the last item inserted. I still need to be able to add a nested UL or a new UL as well as just a li...As for the insertion point, if I need to insert where I have already created an item I think maybe a checkbox would work?
0
 
brad0525Author Commented:
Here is kind of a n example..It kinda works, but I need more functionality to it..Add I do not want any items pre determined when the page is loaded.
<script type="text/javascript">
function expandCollapse(obj)
{
hlink = obj.innerHTML;
obj = obj.parentNode;

if(obj.childNodes.length <= 1) {

var list = document.createElement("OL");
     obj.appendChild(list);
     var li = document.createElement("LI");
     list.appendChild(li);
     li.innerHTML = '<a href="#" onclick="expandCollapse(this);">item 1</a>';
     var li2 = document.createElement("LI");
     li2.innerHTML = '<a href="#" onclick="expandCollapse(this);">item 2</a>';
     list.appendChild(li2);
	 var li3 = document.createElement("LI");
     li3.innerHTML = '<a href="#" onclick="expandCollapse(this);">item 3</a>';
     list.appendChild(li3);

} else {
obj.innerHTML = "<a href='#' onclick='expandCollapse(this);'>"+hlink+"</a>";
}
}
</script>

Open in new window

0
 
HonorGodSoftware EngineerCommented:
> I need it to create a new UL intiailly but have the ability to insert a LI or beign a new UL.

  Kind of.  You don't think that this makes sense...

<ul>
<ul>

  I think that you need to have this as a minimum:

<ul>
  <li>...</li>

Does that make sense?
0
 
HonorGodSoftware EngineerCommented:
re: http://www.experts-exchange.com/Q_26414099.html#a33475932

How do you define the initial insertion point?
0
 
brad0525Author Commented:
Ok I am confused...I need to be able to build something similar to the code below dynamically.I just need it to be a blank page when I get there. I will then click  button to build the overall UL. And then ther first <li> will appear. After that I will have the choice to grow the li with another ul or go back to the original overall UL and build a new li....I hope that clarifies what I am looking for..
<body>


<ul>
  <li>item</li>
  <li>item
    <ul>
	  <li>item</li>
	  <li>item</li>
	  <li>item
	    <ul>
		  <li>item1</li>
		  <li>item1 
          <ul>
		  <li>item1</li>
		  <li>item1
          
          
          </li></ul>
          
          
          </li>
		</ul>
	  </li>
	</ul>
  </li>


</ul>



 
</body>

Open in new window

0
 
HonorGodSoftware EngineerCommented:
> I just need it to be a blank page when I get there.

  ok, that seems reasonable.

> I will then click  button to build the overall UL.

  If the page is blank, where is the button?

  If the page only has a button on it, do you want the ul before, or after the button?
0
 
HonorGodSoftware EngineerCommented:
I have an idea... let me try something.
0
 
HonorGodSoftware EngineerCommented:
Thanks for the grade & points.

Good luck & have a great day.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.