Добавление контента при помощи JavaScript (Не замена)

Многие задают вопрос, как добавить информацию в блок на JavaScript, при чем в блоке уже имеется какая то информация и надо именно добавить, а не заменить. Если сделать так:

document.getElementById('content').innerHTML = 'Новая информация';

То все, что находится в блоке с id: content будет заменено на Новая информация, то что было до вставке, будет стерто. Сейчас я расскажу, как можно избежать удаления и сделать именно добавление контента.

Наверное, самый простой (займет всего одну строчку) - добавление контента при помощи +, мы просто добавляем знак плюса перед знаком равно (=), вот так:

document.getElementById('content').innerHTML += 'Новая информация';

Теперь текст Новая информация будет добавлен в конец информации в блоке.

Еще один вариант добавления контента при помощи метода appendChild. Предназначение данного метода - добавление узла в указанный ему элемент. Узел добавляется в конец. Делаем так:

var div = document.createElement('div');             // Создаем блок ("<div>")
div.innerHTML = 'Новый текст';                       // Добавляем в блок текст
document.getElementById('content').appendChild(div); // Вставляем в блок с id: "content" новый блок

И получаем новый блок, ниже контента в нашем блоке.

А вот оба варианта в одном коде:

<div id="content">Какой то текст</div>

<script type="text/javascript">
var content = document.getElementById('content');

// Первый вариант
content.innerHTML += ' Новый текст';

// Второй вариант
var div = document.createElement('div');
div.innerHTML = 'Новый текст';
content.appendChild(div);
</script>

Можете скопировать кода в HTML документ и убедиться, что код работает! Результат исходного кода страницы должен быть таким:

<div id="content">
    Какой то текст Новый текст
    <div>Новый текст</div>
</div>

На этом пока все, надеюсь, информация оказалась полезной.
Спасибо за внимание!