3

My HTML looks like and js looks like this:

<div class="container"></div>

var html = "<div class="error">hello</div>";

$(".container").append( $(html) );

Problem is that I don't clear the html inside the div with class=container first, so I keep appending messages to that area.

How can I clear anything inside of the div class="container" first and THEN append my 'html' div?

1
  • I'd just like to add that if you only have one div with a class of container, you should really give it an ID instead of selecting by class. Class selectors are really slow, especially compared to selecting by ID. At the very least make the selector be div.container, otherwise jQUery has to look at every single element in the document to see if it has the class you specify (as opposed to looking at every single DIV) Jun 6, 2009 at 23:18

5 Answers 5

11

Assuming you mean to 'replace' what is in your div, I think what you need to use is:

$(".container").html( html );

A more jQueryish way to do it would be:

$errorDiv = $('<div>hello</div>').addClass('error');
$(".container").html($errorDiv.html());

That has the added benefit of giving you a reference to the error div.

4

You can call

$(".container").empty();

before you append the new div element.

Reference: http://docs.jquery.com/Manipulation/empty

3

I take the liberty to assume that you're using the container for status messages, and then creating error/success messages on the fly to go inside the container div. If so, I'd suggest going with the following approach instead:

Html:

<div id="status"></div>

Javascript:

function showError(msg) {
    $('#status').html(msg).addClass('error');
}
function showStatus(msg) {
    $('#status').html(msg).removeClass('error');
}

Note the following:

  • As Paolo mentions in his comment, it is much more effective to reference the <div> by an id - that goes directly on the javascript document.getElementById() method, which is way faster than going over the entire DOM tree in search for one element...
  • As you were clearing the contents of the <div class="container"> for each call, I saw no reason to keep it. You could just as well just manipulate the html contents and the css classes of a single div. Faster, and looks nicer in your markup =)
  • You obviously don't need your show status/error message logic in separate methods - I only did so for clarity.
1

this is how I went about it

$(document).ready(function() {
        $('.err').click(function() {
            $('.err').empty().text('Massive Error has occured. ooof!!!');
        });
    });
1
  • 2
    Doesn't "text" do an implicit empty, replacing whatever was there?
    – Nosredna
    Jun 7, 2009 at 15:41
0

Yes you are right. I meant to say that for append method.

so:

$(".container").empty().append(htmlOfyourerror);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.