HTML 数据属性不接受子 html 类和其他属性

Question

当我使用数据属性时，它接受常规的 html 标签。但不接受儿童班。例如，看我的第一段代码；

<p>Lorem ipsum <a href="#" class="mi-tooltip" data-tooltip="<h1>MIUI_Tooltips is a lightweight.</h1><p>Around 5KB minified </p><u>and offering</u> a wide range <i>of configuration options.</i> <br><br><button> A Button </button>">condimentum</a>.Eros natoque.</p>

它运行良好，因为我在此处添加了常规的 html 标记。但是当我在 data-****** 属性中添加类和值时，它不起作用。看第二个代码；

<p>Lorem ipsum <a href="#" class="mi-tooltip" data-tooltip="<img src="https://images.pexels.com/photos/8726372/pexels-photo-8726372.jpeg?auto=compress&cs=tinysrgb&w=1260" width="100%" class="my-image"/><h1>MIUI_Tooltips is a lightweight.</h1><p>Around 5KB minified </p><u>and offering</u>">condimentum</a>.Eros natoque.</p>

如何在一个数据属性 HTML 标记中添加图像、类、链接和其他属性？

Answer 1

好像你必须用 " 替换 "

document.querySelector('a').dataset.tooltip = '<img src="https://images.pexels.com/photos/8726372/pexels-photo-8726372.jpeg?auto=compress&cs=tinysrgb&w=1260" width="100%" class="my-image"/><h1>MIUI_Tooltips is a lightweight.</h1><p>Around 5KB minified </p><u>and offering</u>'

console.log(document.querySelector('a').outerHTML)

<p>Lorem ipsum <a href="#" class="mi-tooltip">condimentum</a>.Eros natoque.</p>

<a href="#" class="mi-tooltip" data-tooltip="<img src=&quot;https://images.pexels.com/photos/8726372/pexels-photo-8726372.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&quot; width=&quot;100%&quot; class=&quot;my-image&quot;/><h1>MIUI_Tooltips is a lightweight.</h1><p>Around 5KB minified </p><u>and offering</u>">condimentum</a>

我想 ' 也可以：

<p>Lorem ipsum <a href="#" class="mi-tooltip" data-tooltip="<img src='https://images.pexels.com/photos/8726372/pexels-photo-8726372.jpeg?auto=compress&cs=tinysrgb&w=1260' width='100%' class='my-image'/><h1>MIUI_Tooltips is a lightweight.</h1><p>Around 5KB minified </p><u>and offering</u>">condimentum</a>.Eros natoque.</p>