Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.01.2014, 17:15
Аспирант
Отправить личное сообщение для 1lider Посмотреть профиль Найти все сообщения от 1lider
 
Регистрация: 12.04.2013
Сообщений: 86

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

Последний раз редактировалось 1lider, 23.01.2014 в 17:54.
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2014, 18:19
Аватар для jsru_
Кандидат Javascript-наук
Отправить личное сообщение для jsru_ Посмотреть профиль Найти все сообщения от jsru_
 
Регистрация: 09.04.2013
Сообщений: 149

var target = document.getElementById("div_container");
target.appendChild(data);
Ответить с цитированием
  #3 (permalink)  
Старый 23.01.2014, 18:19
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

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


Есть еще target.insertAdjacentHTML('beforeend', html)
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #4 (permalink)  
Старый 23.01.2014, 18:19
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

Сообщение от 1lider
Первый, потому что создает новый div
append тоже создаёт новый элемент, как без этого?
ещё есть appendChild
Ответить с цитированием
  #5 (permalink)  
Старый 23.01.2014, 18:27
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от 1lider
На jquery...
Китаец что-ли? Тут уместен предлог "в". Хотя некоторым свойственно свое "на.." всюду вставлять.
Короче, пошел я спать на.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #6 (permalink)  
Старый 23.01.2014, 18:30
Аспирант
Отправить личное сообщение для 1lider Посмотреть профиль Найти все сообщения от 1lider
 
Регистрация: 12.04.2013
Сообщений: 86

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

Стянул отсюда - http://javascript.ru/optimize/docume...cumentfragment
Цитата:
Фишка заключается в том, что когда documentFragment вставляется в DOM - то он исчезает, а вместо него вставляются его дети.

Последний раз редактировалось 1lider, 23.01.2014 в 18:33.
Ответить с цитированием
  #7 (permalink)  
Старый 23.01.2014, 18:58
Аспирант
Отправить личное сообщение для 1lider Посмотреть профиль Найти все сообщения от 1lider
 
Регистрация: 12.04.2013
Сообщений: 86

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

Последний раз редактировалось 1lider, 23.01.2014 в 19:00.
Ответить с цитированием
  #8 (permalink)  
Старый 23.01.2014, 19:10
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от 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 такой шняги понапихано - посмотрить внутренности - ужаснешься и не захочешь использовать


Сорри, собрался отдыхать, а тут какие-то глупости посыпались...
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #9 (permalink)  
Старый 23.01.2014, 19:11
Аспирант
Отправить личное сообщение для 1lider Посмотреть профиль Найти все сообщения от 1lider
 
Регистрация: 12.04.2013
Сообщений: 86

Как добавить пришедшие с сервера html данные в контейнер к уже существующим элементам на странице? И без создания новых div. Просто, добавить "как есть"..
Ответить с цитированием
  #10 (permalink)  
Старый 23.01.2014, 19:13
Аспирант
Отправить личное сообщение для 1lider Посмотреть профиль Найти все сообщения от 1lider
 
Регистрация: 12.04.2013
Сообщений: 86

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
js-фреймворк, связывающий css классы и dom элементы Danxil Оффтопик 12 30.03.2014 18:41
Как вставить найденный элемент в другой div, DOM titan1993 Элементы интерфейса 2 05.11.2013 15:52
Динамически вставить в dom скрипт несколько раз azdev Элементы интерфейса 2 04.11.2012 13:04
Добавить в набор новые элементы a22432 jQuery 1 28.08.2012 14:34
вставить javascript в DOM GooD][Man jQuery 2 23.01.2010 18:21