svg在jquery中使用tag不返回自闭

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表示时，浏览器只输出标准长格式。