javascript - svg在jquery中使用标签不返回自关闭

Question

考虑以下 html 代码:

<a id="generic" href="#">
    <svg class=""><use xlink:href="#icon-menu" /></svg>
</a>

并考虑以下 js:

$('#generic').on('click', function() {
    alert($(this).html());
});

我期望警报的输出为 <svg class=""><use xlink:href="#icon-menu" /></svg> ，换句话说，一个 <svg>具有自动关闭功能<use />标签与我使用的一样。

但是，js返回的不是自闭<use />相反，它将其转换为结束 <use>标签。

这是输出:<svg class=""><use xlink:href="#icon-menu"></use></svg> .

它忽略我的自动关闭的任何原因<use />标记并将其转换为结束语 <use></use>标签？

Answer 1

浏览器在内部将 HTML 解析为 DOM 形式，并且不会记录您是否使用了结束标记或自结束标记。自闭合标签只是为作者提供方便。您可以将其视为编译代码。

当您执行 html() 或 DOM 方法 .innerHTML() 时，再次序列化内部 DOM 表示形式时，浏览器仅输出标准 long表格。