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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

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

Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

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

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?
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

HonorGodSoftware EngineerCommented:
Looking.  I'm "almost there" ;-)
brad0525Author Commented:
Ok great...thanks
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

HonorGodSoftware EngineerCommented:
You don't need the

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


I just use that to help me debug.
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.
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

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?
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

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?
HonorGodSoftware EngineerCommented:
re: http://www.experts-exchange.com/Q_26414099.html#a33475932

How do you define the initial insertion point?
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

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?
HonorGodSoftware EngineerCommented:
I have an idea... let me try something.
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
HonorGodSoftware EngineerCommented:
Thanks for the grade & points.

Good luck & have a great day.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Components

From novice to tech pro — start learning today.