Как можно вставить большой кусок Html кода через JS опять же в Html код?

Question

[Евгений Стек]

Суть в том, что нужно вставить довольно большой кусок html кода через javascript, то есть переписывать все это заново долго и бессмысленно. При попытке вставить через innerHtml он протестует ибо это только для одной строки

Comments

[Виталий Инчин ☢]

>innerHtml он протестует ибо это только для одной строки
Шта? Сами придумали, или кто надоумил?

[Евгений Стек]

Виталий Инчин ☢: во всяком случае мне выдавало ошибку и сказали так. Как тогда вставить много текста, если можно?

[Виталий Инчин ☢]

Евгений Стек: никаких ошибок не должно возникать при использовании innerHTML. Дайте пример ошибка на jsfiddle.

Answer 1

[look2009]

Использовать ajax. Получить по запросу нужный html и заменить или добавить.

Answer 2

[Dark Hole]

Есть document.createElement. Вот в этом направление нужно копать. Помочь?

Comments

[look2009]

Ну если хотим пегрузить страницу избыточными данными то можно и так.

[Dark Hole]

look2009: какими избыточными данными? А? AJAX, к твоему сведению, еще худший вариант - и интернет тратит, и весит не намного легче

[Евгений Стек]

Dark Hole там классов 10 и у каждого внутри еще всякие `шки и подобное, как то не очень писать это все руками. + там сильно будет грузить устройство юзера

[Dark Hole]

Евгений Стек: не вижу выхода. Либо jQuery - для простоты работы. Либо нативный JS. Если содержимое строго определено - innerHTML поможет. Насчет нагрузки - если не делать это каждые полсекунды - врядли особо грузить будет. только вставлять нужно всем скопом

[look2009]

Dark Hole: Аякс в данном случае лучшее зло, т.к. идёт выборка данных для каждого id по необходимости. Человек же написал большой html в разных id, т.е. есть условия, проще скрипт написать который по условиям будет фильтровать и ответ отдавать.

[Dark Hole]

look2009: но мой способ быстрее. И постоянное обращение к серверу по мелочам, быстро исчерпает ОЗУ сервера

[VZVZ]

Dark Hole: > AJAX ... интернет тратит
За счет чего бы то?

> идёт выборка данных для каждого id по необходимости
Причем здесь какой-то id?

> быстро исчерпает ОЗУ сервера
На сервере утечка памяти?

[Dark Hole]

VZVZ: 2ой вопрос это не ко мне. Представь себе, если будут бомбардировать Ajaxсом все время - это нагрузка раза в 2 больше

[VZVZ]

Dark Hole: > нагрузка раза в 2 больше
Нагрузка на что, простите? На ОЗУ?
А почему не на шурупы, которые держат материнскую плату в корпусе моего планшета?
Мда, веб-девелоперы все-таки ипанутый народ))

> Представь себе, если будут бомбардировать Ajaxсом все время
"Все время" - это как, например, в случае с чатом, когда надо каждую секунду проверять новые сообщения?
Для таких случаев существует TCP.
В упрощенческом высокоуровневом HTTP если клиент не отсылает TCP-пакет с запросом, то и пакета с ответом не получает.
А на уровне TCP все проще. Открываем вкладочку, подключение с серваком установлено. Появилось новое сообщение, сервак шлет пакет, клиент его получает, что-то делает. Также и наоборот, клиент может пакеты серваку слать.
Технически TCP реализуется на NodeJS (сервер) и socket.io (клиент)
По этому же принципу мессенджеры работают

Answer 3

[Алексей П]

Подключите jquery. И используйте $('tag').append('')

Comments

[Dark Hole]

Когда подключаешь большую библиотеку ради маленькой фичи

[VZVZ]

Dark Hole: что вы выдумываете. Вовсе не большую, вовсе не ради маленькой фичи. Фич там до кучи.

[Dark Hole]

VZVZ: большой - это относительно. Во вторых тогда уж лучше нативный js использовать

[VZVZ]

Dark Hole: > большой - это относительно
Относительно чего?
Еще раз, не фантазируйте. Я исследовал этот вопрос и описал его в статье, сразу для всех, так сказать:
codeproject.com/Tips/1065669/How-To-Build-Web-Site...

> Во вторых тогда уж лучше нативный js использовать
*facepalm*
Нет бы сделать вывод, что раз все так плохо, то стоит написать свою библиотеку, имеющую преимущества jQuery (а заодно и других библиотек) и не имеющую их недостатков (в частности, имеющую более гибкое деление на модули в целях оптимизации)
Такие слова, как архитектура, абстракция, вам незнакомы?
Или вы тупо кодер?

[Dark Hole]

VZVZ: знакомы. Вот сейчас подумываю селектор jQuery дописать. Насчет либ... у меня свой подход к этому, не всем он будет удобен

Answer 4

[kn1ght_t]

var createNode = function(tag, attributes, content) {
	var node = document.createElement(tag),
	attribute;

	for (attribute in attributes) {
		if (attributes.hasOwnProperty(attribute)) {
			node.setAttribute(attribute, attributes[attribute]);
		}
	}

	if (typeof content === 'string') {
		node.textContent = content;
	} else {
		content.map(function(contentItem) {
			node.appendChild(contentItem);
		});
	}

	return node;
};

Answer 5

[VZVZ]

Не совсем понятно, что именно хотите заменить и почему тупо вставить целиком через innerHTML не устраивает.
А вообще для клиентской "шаблонизации" юзают Angular, React и подобное.
jQuery также несколько облегчает задачу вставки элементов, но не более того, насколько я знаю, это не "шаблонизатор" как тот же Angular.

Answer 6

[Alexey]

https://learn.javascript.ru/templates вот отлично все написано.