Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Creating UL dynamically

Posted on 2010-08-19
21
Medium Priority
?
1,440 Views
Last Modified: 2013-11-18
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
0
Comment
Question by:brad0525
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 14
  • 7
21 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 33473821
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
 

Author Comment

by:brad0525
ID: 33474205
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 33474444
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 41

Expert Comment

by:HonorGod
ID: 33474469
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
 

Author Comment

by:brad0525
ID: 33474496
Yea, sorry I did write that incorrectly...Do you know how it can be created so that these items can be created dynamically?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 33474497
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 33474504
Looking.  I'm "almost there" ;-)
0
 

Author Comment

by:brad0525
ID: 33474509
Ok great...thanks
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 33474873
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 33474884
You don't need the

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


I just use that to help me debug.
0
 

Author Comment

by:brad0525
ID: 33474935
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 33475329
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
 

Author Comment

by:brad0525
ID: 33475656
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
 

Author Comment

by:brad0525
ID: 33475932
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 33475938
> 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
 
LVL 41

Expert Comment

by:HonorGod
ID: 33475991
re: http://www.experts-exchange.com/Q_26414099.html#a33475932

How do you define the initial insertion point?
0
 

Author Comment

by:brad0525
ID: 33476677
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 33478289
> 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
 
LVL 41

Expert Comment

by:HonorGod
ID: 33478313
I have an idea... let me try something.
0
 
LVL 41

Accepted Solution

by:
HonorGod earned 2000 total points
ID: 33479138
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 33496564
Thanks for the grade & points.

Good luck & have a great day.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you will learn how to create a free basic website on Bitbucket, a git service provider. Polymer creates dynamic HTML components, which allow more flexibility than static HTML. This tutorial uses Ubuntu Linux but can also be done on W…
Before we dive into the marketing strategies involved with creating an effective homepage, it’s crucial that EE members know what a homepage is. In essence, a homepage is the introductory, or default page, of a website that typically highlights the …
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
This lesson discusses how to use a Mainform + Subforms in Microsoft Access to find and enter data for payments on orders. The sample data comes from a custom shop that builds and sells movable storage structures that are delivered to your property. …
Suggested Courses

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question