Is it possible to replace a div element with jquery and update the dom?

Question

Hey guys quick question, I want to update the contents of a div with two new divs to take the place of the previous ones. Each new div has a unique id to take the place of the old ones. I then want any further update to use the ids of the new divs as their values instead of the original. Is this possible in Jquery? Thanks in advance for any assistance.

var display_total = $(".display_total").attr("id");
var display_of_total = $(".display_of_total").attr("id");

var new_display_of_total = parseInt(display_of_total) + 1;
var new_display_total = parseInt(display_total) + 1;

$('.totalmessages').html('
    <div class="display_of_total" id="' + new_display_of_total + '">
        Displaying ' + new_display_of_total + ' of 
    </div>
    <div class="display_total" id="' + new_display_total + '">'
        + new_display_total + ' messages...
    </div>
');

(Editors note: no linebreaks in original code)

Answer 1

Why not to use DOM manipulation methods? Like this:

var new_display_total= 1 + parseInt($(".display_total").attr("id"));
var new_display_of_total= 1 + parseInt($(".display_of_total").attr("id"));

$('.totalmessages').empty();

var new_total_element = $('.totalmessages').append('<div class="display_of_total" id="'+new_display_of_total+'">Displaying '+new_display_of_total+' of </div>"');

var new_display_of_total_element = $('.totalmessages').append('<div class="display_total" id="'+new_display_total+'">'+new_display_total+' messages...</div>''

Answer 2

It looks like you're pretty much there from what you've posted. What's not working for you?

I do have a couple friendly words of advice though.

First off, according to w3schools an element's id can't only be a number. (Firefox seems to play nice with numerical ids.)

Naming rules:

• Must begin with a letter A-Z or a-z
• Can be followed by: letters (A-Za-z), digits (0-9), hyphens
  ("-"), underscores ("_"), colons
  (":"), and periods (".")
• Values are case-sensitive

If it needs to be a number, you can use a data attribute instead <div data-num="25"></div>. Then you can access it the same way you're getting the id, just swap in "data-num" for "id". $('.display_total').attr('data-num').

Secondly, I would place that in a function that can be called for a certain action and you're requirement I then want any further update to use the ids of the new divs as their values instead of the original. will be fulfilled.

You're function would look something like:

function updateMessages(){
    var display_total=$(".display_total").attr("data-num");
    var display_of_total=$(".display_of_total").attr("data-num");

    var new_display_of_total=parseInt(display_of_total)+1;
    var new_display_total=parseInt(display_total)+1;

    $('.totalmessages').html('<div class="display_of_total" data-num="'+new_display_of_total+'">Displaying '+new_display_of_total+' of </div><div class="display_total" data-num="'+new_display_total+'">'+new_display_total+' messages...</div>');
}

And you'd be able to update it, for example, on a click event like so:

$('#click_me').click(function(){
   updateMessages();
});