Add new div in a nested HTML structure

Question

I have this html structure and code:

<ul class="navMore">
  <li><a href="#">Link 1</a></li>
  <li href="#"><a>Link 2</a><?li>
</ul>

<div class="row-fluid"></div>


$(".navMore li a").each(function() {
   $(this).on("click", function() {
        $('<div class="row-fluid"></div>').insertAfter($(this).closest('.row-fluid'));
        $('<div id="content" class="span4"></div>').insertAfter($(this).next('.row-fluid'));
   });
});

I need to add a new .row-fluid div just after the previous .row-fluid

Expected result:

<ul class="navMore">
  <li><a href="#">Link 1</a></li>
  <li href="#"><a>Link 2</a><?li>
</ul>
<div class="row-fluid"></div>
<div class="row-fluid"></div>

But if we already added a new .row-fluid div, then the #content div should be put inside this newly added row-fluid div

How do I achieve this?

<ul class="navMore">
  <li><a href="#">Link 1</a></li>
  <li href="#"><a>Link 2</a><?li>
</ul>
    <div class="row-fluid"></div>
    <div class="row-fluid">
        <div id="content" class="span4"></div>
    </div>

Finally, how can I do that if we have inserted 3 #content div, start again with a new .row-fluid div and all again?

Answer 1

Eventually I went with this:

$(".navMore li a").on("click", function() {
  var $el = $(this);
  var $row = $el.closest('.row');
  if($row.next('.new').length){
     $('<div class="span"></div>').appendTo('.new');
  }
  else {
    $('<div class="new"></div>').insertAfter($row);
    $('<div class="span"></div>').appendTo('.new');
  }
});

Answer 2

function insertRow() {
    $newdiv = $("<div class='row-fluid'/>");
    $newdiv.insertAfter(".row-fluid:last");
    return $newdiv;
}

// assume you're passing a content object into the routine
function insertContent( contentObj) {
    $lastRow = $(".row-fluid:last");
    if( $lastRow.children().length >= 3) {
        insertRow().append( contentObj);
    } else {
        $lastRow.append( contentObj);
    }
    return contentObj;
}

Answer 3

Here you go.

<script type="text/javascript" >
$(document).ready(function () {
    $(".navMore li a").click(function() {

    var countOfDiv = $(".row-fluid").length;
    if(countOfDiv < 2)
            $('<div class="row-fluid"></div>').insertAfter(".row-fluid");
    else
        $(".row-fluid:last").html("<div id=\"content\" class=\"span4\"></div>");
    });
});

</script>

Link 1

Link 2