Как правильно передать html в javascript?

[gsdev99]

Всем привет, подскажите, пожалуйста, как правильно передать 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]

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

gsdev99, Dilettante_Pro,

Я хочу сделать следующее:

Но зачем? Зачем вставлять 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]

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