Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как правильно передать html в javascript? (https://javascript.ru/forum/dom-window/77715-kak-pravilno-peredat-html-v-javascript.html)

gsdev99 10.06.2019 16:55

Как правильно передать 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/

Буду благодарен любой помощи.

Dilettante_Pro 10.06.2019 17:45

<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>

Malleys 10.06.2019 23:52

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>

gsdev99 11.06.2019 18:14

Большое Вам спасибо.


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