Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.06.2019, 16:55
Аспирант
Отправить личное сообщение для gsdev99 Посмотреть профиль Найти все сообщения от gsdev99
 
Регистрация: 03.02.2019
Сообщений: 37

Как правильно передать html в javascript?
Всем привет, подскажите, пожалуйста, как правильно передать html в javascript (кроссбраузерно)?
Я хочу сделать следующее:
<div class="card" data-component="card" data-options="'<div class="customisible-test"><h4>Customisible</h4><ul><li>Image</li><li>Header</li><li>Secondary copy</li></ul></div>"'>

Очевидно, что это не валидная запись.
В js мне нужно получить данный html в строке:
const str = '<div class="customisible-test"><h4>Customisible</h4><ul><li>Image</li><li>Header</li><li>Secondary copy</li></ul></div>";

Я нашел вот такой способ, но в IE11 он не работает:
https://atomiks.github.io/tippyjs/html-content/

Буду благодарен любой помощи.
Ответить с цитированием
  #2 (permalink)  
Старый 10.06.2019, 17:45
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,868

<div class="card" data-component="card" data-options='<div class="customisible-test"><h4>Customisible</h4><ul><li>Image</li><li>Header</li><li>Secondary copy</li></ul></div>'>
<script>
const str = document.querySelector(".card").getAttribute("data-options");
alert(str);
</script>

Вариант
<div class="card" data-component="card" data-options='<div class="customisible-test"><h4>Customisible</h4><ul><li>Image</li><li>Header</li><li>Secondary copy</li></ul></div>'>
<script>
const str = document.querySelector(".card").dataset.options;
alert(str);
</script>

Последний раз редактировалось Dilettante_Pro, 10.06.2019 в 17:52.
Ответить с цитированием
  #3 (permalink)  
Старый 10.06.2019, 23:52
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 957

gsdev99, Dilettante_Pro,
Сообщение от gsdev99
Я хочу сделать следующее:
Но зачем? Зачем вставлять HTML в атрибут элемента HTML, когда ему место среди других элементов? Такое сложно поддерживать, нужно помнить, что эти кавычки атрибутов на самом деле ещё не атрибуты, поэтому их надо экранировать..

Используйте элемент template, это то, что нужно вам! Я не думаю, что вам нужно получать HTML в строке, вы достойны того, чтобы получить сразу работающий элемент!

<div class="card" data-component="card">
	<template>
		<div class="customizable-test">
			<h4>Customizable</h4>
			<ul>
				<li>Image</li>
				<li>Header</li>
				<li>Secondary copy</li>
			</ul>
		</div>
	</template>
</div>

<script>
var card = document.querySelector(".card");
var node = card.querySelector("template").content.cloneNode(true);
// например, вывести в карточку
card.appendChild(node);
</script>


Если вам нужна поддержка в IE 11, то добавьте следующее..
<div class="card" data-component="card">
	<template>
		<div class="customizable-test">
			<h4>Customizable</h4>
			<ul>
				<li>Image</li>
				<li>Header</li>
				<li>Secondary copy</li>
			</ul>
		</div>
	</template>
</div>

*!*
<style>template { display: none; }</style>
<script>
(function() {
	if("content" in document.createElement("template"))
		 return false;

	var templates = document.getElementsByTagName("template");

	for(var i = 0, length = templates.length; i < length; i++) {
		var template = templates[i];
		var content = template.childNodes;
		var fragment = document.createDocumentFragment();

		while(content[0])
			fragment.appendChild(content[0]);

		template.content = fragment;
	}
})();
</script>
*/!*

<script>
var card = document.querySelector(".card");
var node = card.querySelector("template").content.cloneNode(true);
// например, вывести в карточку
card.appendChild(node);
</script>
Ответить с цитированием
  #4 (permalink)  
Старый 11.06.2019, 18:14
Аспирант
Отправить личное сообщение для gsdev99 Посмотреть профиль Найти все сообщения от gsdev99
 
Регистрация: 03.02.2019
Сообщений: 37

Большое Вам спасибо.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно рассчитать последнее событие на клиенте (native javascript)? s24344 Элементы интерфейса 0 19.01.2019 07:17
Как в javascript передать ссылку? jtd Общие вопросы Javascript 26 16.06.2017 05:54
Как передать значение select из формы в переменную javascript 2Step Общие вопросы Javascript 2 11.03.2014 21:11
Как правильно запустить JavaScript в моем случае ivanoevg Общие вопросы Javascript 1 21.09.2011 17:45
есть переменная javascript надо передать ее в php как это сделать arahmanov Общие вопросы Javascript 5 08.08.2011 15:26