add a <div> before 5th <li> and add another </div> after the last <li> from a list?

Question

how can i make it possible say i have a unordered list of 17 items. so now i want to add a div tag just before the the 5th item and the closing div will go after the last item of the list. the result will look some thing like this.

      <ul>
        <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<div>
        <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
        <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</div>
      </ul>

and i cann't hard code this because this list will be generated by a php function. is there any way to do it? thank you

added: i am trying to hide those items that are in the div. and there will be another button somewhere so that when you click those items will show up.

Answer 1

It looks like you're trying to associate some common functionality (or perhaps styling?) with all-but-the-first-4-items in that <ul>. Perhaps you could use a class attribute or something instead?

I don't know exactly what you're trying to achieve, but something like this might help:

var ul = //...
var items = ul.getElementsByTagName("li");
for (var i = 4; i < items.length; i++) {
    // do whatever you need to do here, e.g.:
    items[i].className += " foo";
}

The above snippet iterates over all but the first 4 elements of the list. (If you gave the <ul> an ID, you could use document.getElementById() to find it).

Edit:

OK, I see that you want to be able to toggle the visibility of these items. I would suggest that instead of surrounding the items in a <div>, use the technique described in my answer to first hide the list items, then do something similar when the button is clicked.

I'd probably put the item-finding logic in a function:

function getListItemsOfInterest() {
    var ul = //...
    var allItems = ul.getElementsByTagName("li");
    var items = [];
    for (var i = 4; i < allItems.length; i++) {
        items.push(allItems[i]);
    }
    return items;
}

then just iterate over the returned array to do the show/hide logic.

Predictably, I will also recommend you look into jQuery (don't know if you are able to use it or not). It tends to make this sort of thing a lot easier. For instance, you could achieve all of the above with something like the following:

$("ul>li:gt(3)").show();

Answer 2

While what you're trying to do is wrong in itself, I'm just answering the question here. Use this (it's pretty self-explanatory):

function insertDiv(){
    var d = document.createElement('div'), i=2, e = document.getElementsByTagName('li')[i];
    while(e){
     d.appendChild(e.cloneNode(true));
     e.parentNode.removeChild(e);
     e = document.getElementsByTagName('li')[i];
    }
document.getElementsByTagName('ul')[0].appendChild(d);
}

Where i is the tag number you want to start from. Reason why this isn't a for loop is because every time you remove an element, the length decreases. If the ul isn't the only one, give it an ID and use document.getElementById() instead.