Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Вставить новые элементы в DOM (https://javascript.ru/forum/events/44537-vstavit-novye-ehlementy-v-dom.html)

1lider 23.01.2014 17:15

Вставить новые элементы в 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(), добавляет к уже существующим элементам, новые элементы?

jsru_ 23.01.2014 18:19

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

danik.js 23.01.2014 18:19

Цитата:

Сообщение от 1lider
Интересно, как jquery фунция .append(), добавляет к уже существующим элементам, новые элементы?

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

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


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

animhotep 23.01.2014 18:19

Цитата:

Сообщение от 1lider
Первый, потому что создает новый div

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

danik.js 23.01.2014 18:27

Цитата:

Сообщение от 1lider
На jquery...

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

1lider 23.01.2014 18:30

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

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

Фишка заключается в том, что когда documentFragment вставляется в DOM - то он исчезает, а вместо него вставляются его дети.

1lider 23.01.2014 18:58

Цитата:

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

danik.js 23.01.2014 19:10

Цитата:

Сообщение от 1lider
А может быть такой вариант, что append() использует в своей вставке document.createDocumentFragment()?

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

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

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

$(target).append(collection)

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

Цитата:

Сообщение от 1lider
Есть ли способ вставки, без, создания этого "нового элемента"?

Глаза разуй. Выше был предложен такой метод.
Цитата:

Сообщение от 1lider
У меня этот "новый элемент", на странице портит всю картину..

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


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

1lider 23.01.2014 19:11

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

1lider 23.01.2014 19:13

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


Часовой пояс GMT +3, время: 19:11.