При добавлении сообщения об ошибке, сначала хотите очистить div

Question

Мой HTML выглядит так, а js выглядит так:

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

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

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

Проблема в том, что я не очищаю HTML внутри div с помощью class = container, поэтому я продолжаю добавлять сообщения в эту область.

Как я могу сначала очистить что-либо внутри div class = "container", а затем добавить мой HTML-файл?

Answer 1

Предполагая, что вы хотите «заменить» то, что находится в вашем div, я думаю, что вам нужно использовать:

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

Более jQueryish способ сделать это будет:

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

Это дает дополнительное преимущество, давая вам ссылку на ошибку div.

Answer 2

Вы можете позвонить

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

перед добавлением нового элемента div.

Ссылка: http://docs.jquery.com/Manipulation/empty

Answer 3

Я позволю себе предположить, что вы используете контейнер для сообщений о состоянии, а затем на лету создаете сообщения об ошибках / успехах, чтобы зайти внутрь контейнера div. Если это так, я бы предложил использовать следующий подход:

Html:

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

Javascript:

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

Обратите внимание на следующее:

• Как упоминает Паоло в своем комментарии, гораздо эффективнее ссылаться на <div> с помощью id - который идет непосредственно по методу javascript document.getElementById(), что намного быстрее, чем обход всего дерева DOM в поиск одного элемента ...
• Когда вы очищали содержимое <div class="container"> для каждого вызова, я не видел причин сохранять его. Вы также можете просто манипулировать html-содержимым и классами css одного div. Быстрее, и выглядит лучше в вашей разметке =)
• Вам явно не нужна логика показа статуса / сообщения об ошибке в отдельных методах - я сделал это только для ясности.

Answer 4

вот как я это сделал

$(document).ready(function() {
        $('.err').click(function() {
            $('.err').empty().text('Massive Error has occured. ooof!!!');
        });
    });

Answer 5

Да, вы правы. Я хотел сказать, что для добавления метода.

так:

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