insert html after

Question

Hello, my question is the following what would be the best way to insert a div container and the next one after the last inserted one

<div class="pane">
<div class="inhoud">
    <h3>Sample heading</h3>
    <p>Testbericht. </p></div>
  <form id="noteform" class="frm">
    <input type="image" src="images/kn_verwijder.gif" alt="delete" class="delete" /><br />
    <input type="hidden" name="frmnoteid" id="frmnoteid" value=""/>
  </form>
</div>

What I know sofar counting the number off div's already on the page with $("#foo > div").size() the insertafter method using the selector and the load method to load the html data from a file

The problem is that I don't know If I can use these methods properly too get the result

If anybody has already had experience with this, please

thanks in adv, Richard

Answer 1

you can use $(".divtogoafter:last").append("content to insert"); That uses the psuedo-selector last, so that the last div is the one that the data is inserted after.

Answer 2

thanks Ryan,

That seems a lot simpeler, but I think I can better use the load event, if I create more html for that specific div, I can also alter the layout more easely. One other thing I need too do is check if there is already a div on that page and if not do something else like append to another selector first

$(document).ready(function(){
    $('a[name=newpanel]').click(function(e) {   
        //Cancel the link behavior   
        e.preventDefault()
      newnote()
)}

    function newnote() {
         var $aantal = $("div.pane").size()
         $('<div class="pane"></div>').insertafter('div.pane:gt($aantal-1)');  
         $(this).load('newpanel.html.inhoud');
        }

mayby, you can see, if my code can be done less complicated or better, but keeping with the load method because I like that option better then too store it in a variable

also, is my use of the keyword this correct, too make an object of the newly created div?

any advice is appreciated

Richard

Answer 3

I tested the function and it doesn't do anything It also doesn't show the second alert, only the first

I try'd to load int this and div.pane:last and it doesn 't work what is going wrong??

function newnote() { var $aantal = $("div.pane").size() alert($aantal);

 $('<div class="pane"></div>').insertafter('div.pane:gt($aantal-1)');  
 var $aantal = $("div.pane").size()
 alert($aantal);
 $(div.pane).load(newnote.html');
}

Answer 4

this code is working, except for setting the value off the hiddenfield if I use last in the selector, the alert that I use for testing gives back a undefined If i set the previous one, that was already on the page without using jquery to add it

see: last - 1 in the selector, then there is no problem also, when I count the id's off the hiddenfields, it returns one instead off two is it because it is the same id-name?? what would be the solution??

function notenieuw() {
 var $aantal = $("div.pane").size()
 alert($aantal);
 $("div.wrapper:last").after('<div class="wrapper"></div>'); 
 $('.pane:last-1 #frmnoteid').val("3");
 var $waarde = $('.pane:last-1 #frmnoteid').val()
 alert("waarde: " + $waarde);
 var $aantal = $("div.pane").size()
 alert($aantal);
 $('.wrapper:last').load('tbnote.html .pane');
}

does anyone have a suggestion??

Answer 5

I'm not really clear about what you're trying to do, but you could do something like this...

Instead of using load(), use $.get() to load the html without inserting it, and then append it into the page using the sucess callback. That way, you don't need to worry about creating a wrapper div. Just have your html page, tbnote.html, have the proper markup you would like.

function newnote() {
    $.get("tbnote.html", function(html) {
        if($(.pane).length > 0) { \\test  there is already .pane div on page
            $(".pane:last").after(html);
        } else {
            $("#someOtherDiv").append(html); \\append to another div
        }
    });
}

after() will parse the html response and inject it into the dom, well, after the selected element.

With $.get, you could also do something more advanced and have your template be able to accept querystrings, or data, and plug it into your html before rendering the page.