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