Вставить новые элементы в 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. Отдыхайте и не обращайте внимания на наши глупости.. Вас лично никто не заставляет. Найдётся куча других добрых людей, которые смогут НОРМАЛЬНО по человечески всё изъяснить.

Бляя...
Насчет кроссбраузерности не ручаюсь, хотя проблем быть не должно..
Чем div не угодил, а?

Да ладно. Если ты читать не умеешь, тот помочь тебе трудно будет.

Как ты думаешь, что делает метод insertAdjacementHTML? INSERT HTML? INSERT! HTML!!!
"Какую-то непонятную хрень, которая не касается моей темы" - подумал ты и наштамповал одинаковых вопросов, невзирая на намеки...

danik.js. Ну а что теперь, как быдло себя ведёте. Сколько вам лет, 13? И когда мы перешли с вами на ТЫ.

Все, я спать. На всякий случай, повторю:

Буду копать в этом направлении. Спасибо.

Фух, слава богу, значит ты не слеп и умеешь читать. Это радует :)
Это интернет, детка. Кто ж тебя знает. Может ты бот?

Если что-то не нравится - попрошу игнорировать мои ответы и не пользоваться предложенными советами.

danik.js. Конечно, хорошо что вы даете советы. И я ценю это. Но ведь, можно всё это преподавать в более "человечной" форме. Чтобы впоследствии никто ни на кого не держал обиду и злость. Кому нужны эти разногласия..

Пытаюсь использовать такую форму в первых комментариях. Дальше форма становится бесчеловечной. А вобще - не воспринимай все так близко к сердцу. Тем более написанное кем-то там.

danik.js. Ваши советы мне помогли. Спасибо. Благодарствую.

Взаимоисключающие параграфы. Тема требует вставить новые элементы в DOM. А вы хотите вставить в окно, то есть браузеру подкинуть чтоб он отрендерил.

Ну вот, это зависит от задачи. Если вам не нужны эти новые элементы в доме, не нужны события на них и все такое - закидывайте новый кусок хтмля. Иначе - в дом.