jQuery clone().html()处理XHTML元素时生成单独结束标签，如何避免？

你提到当对包含自定义XHTML自闭合元素（比如<ix:tuple />）的DOM元素调用clone().html()时，jQuery会重构元素，把自闭合标签改成带单独结束标签的形式，比如<ix:tuple ...></ix:tuple>，想知道怎么避免这个情况对吧？

先看一下你给出的代码示例：

HTML结构及脚本引用 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="test">
<ix:tuple name="se-ar-base:UttalandenTuple" tupleID="UttalandenTuple1" />
</span>
<span id="test2"></span>

对应的JS代码 #

var clone = $("#test").clone().html();
$("#test").text(clone);

解决办法 #

其实这个问题的根源在于jQuery的.html()方法是基于HTML解析规则来处理内容的，对于XML命名空间的自定义自闭合元素，它会默认转换成成对结束标签的格式。要保留原始的自闭合结构，可以试试下面几种方法：

• 直接使用原生DOM的innerHTML/outerHTML属性
  跳过jQuery的.html()方法，直接访问原生DOM元素的属性，这样能保留浏览器解析时的原始标签格式：

  // 获取#test内部的原始内容
  var originalContent = $("#test")[0].innerHTML;
  $("#test").text(originalContent);
  
  // 如果需要获取整个#test元素的HTML（包括自身标签），用outerHTML
  var fullElementHTML = $("#test")[0].outerHTML;
  

• 克隆后取原生元素的innerHTML
  如果你一定要用到clone方法，克隆后直接访问原生DOM的innerHTML即可：

  var cloneContent = $("#test").clone()[0].innerHTML;
  $("#test").text(cloneContent);
  

• 直接复制元素内容到目标容器
  要是你的需求是把内容复制到另一个元素（比如#test2），不用转成文本，直接用.html()或.append()插入，也不会破坏标签结构：

  // 把#test的内容复制到#test2
  $("#test2").html($("#test").html());
  
  // 或者克隆整个#test元素插入到#test2
  $("#test").clone().appendTo("#test2");
  

补充说明 #

为什么.html()会出现这个问题？因为jQuery在序列化元素内容时，是按照HTML的规则来处理的，而HTML里的自闭合元素（比如<img>、<input>）是固定的几个，对于自定义的XML命名空间元素，它不会识别为自闭合类型，所以会自动补全结束标签。而原生的innerHTML/outerHTML会保留浏览器对XHTML的解析结果，只要你的页面设置了正确的XHTML DOCTYPE，就能保留自闭合的格式。

内容的提问来源于stack exchange，提问作者Kevin Lindmark