Вставить новые элементы в DOM
 

Здравствуйте.

На jquery есть такая интересная функция - $(element).append();

Не буду долго тянуть. Вопрос. Как добавить новые элементы на страницу тем же образом что и append(), но только на чистом javascript, без jquery?

На другом форуме мне советовали такой вариант:

var div = document.createElement('div');
div.innerHTML = data; // html данные пришедшие с сервера
var target = document.getElementById("div_container");
target.appendChild(div);
div = null;

И даже был такой вариант:

document.getElementById("div_container").innerHTML += data;

Но эти варианты, мне немножко не подходят. Первый, потому что создает новый div и вставляет в него данные. А второй, перезаписывает все имеющиеся элементы на странице.. Интересно, как jquery фунция .append(), добавляет к уже существующим элементам, новые элементы?

var target = document.getElementById("div_container");
target.appendChild(data);

Через appendChild и добавляет. Притом что HTML парсится там именно путем создания div'а (в некоторых случаях создается другой элемент).

То есть твой первый вариант и есть упрощенный вариант jQuery.


Есть еще target.insertAdjacentHTML('beforeend', html)

append тоже создаёт новый элемент, как без этого?
ещё есть appendChild

Китаец что-ли? Тут уместен предлог "в". Хотя некоторым свойственно свое "на.." всюду вставлять.
Короче, пошел я спать на.

Благодарю за ответы. А может быть такой вариант, что append() использует в своей вставке document.createDocumentFragment()?

Стянул отсюда - http://javascript.ru/optimize/docume...cumentfragment

Есть ли способ вставки, без, создания этого "нового элемента"? Например с помощью того же DocumentFragment. У меня этот "новый элемент", на странице портит всю картину..

Что за вопрос. Ты ослеп? Выше было уже сказано как работает append().
Ну хорошо..
Нет. Вместо фрагментов в jQuery используются "коллекции". К слову функция $ возвращает коллекцию (массиво-подобный объект).

Ты ж как пишешь: $(target).append($('<span/><span/>')), то есть:

var collection = $('<span/><span/>');

создается временный div через document.createElement, ему присваивается переданный innerHTML. В результирующую коллекцию попадут div.childNodes.

$(target).append(collection)

Тут все просто - каждый из элементов коллекции добавляется в target через appendChild.

Глаза разуй. Выше был предложен такой метод.
Ничего он не может портить. Или он не дает тебе покоя? Ну скрой под капот. В jQuery такой шняги понапихано - посмотрить внутренности - ужаснешься и не захочешь использовать :D


Сорри, собрался отдыхать, а тут какие-то глупости посыпались...

Как добавить пришедшие с сервера html данные в контейнер к уже существующим элементам на странице? И без создания новых div. Просто, добавить "как есть"..

danik.js. Отдыхайте и не обращайте внимания на наши глупости.. Вас лично никто не заставляет. Найдётся куча других добрых людей, которые смогут НОРМАЛЬНО по человечески всё изъяснить.