jQuery clone（）：克隆元素未按预期显示在输出中

Question

我正在尝试第一次使用jQuery clone() 。 似乎无法正常工作。 输出应该是带有更新的页面标题的完整HTML。

var test = '<section class="fine-print clearfix"><p class="copyright">&#169; 2012 by <a href="test.com" target="_blank">ABCD</a>. All rights reserved.<h1 class="page-title">Default Template</h1></section>';

var x = $(test);
var z = x.clone();
var s = z.find('.page-title').html('<div id="FSPpageTitle" fsp="pageTitle"></div>');
alert(s.html());

预期的输出（整个HTML）：

<section class="fine-print clearfix"><p class="copyright">&#169; 2012 by <a href="test.com" target="_blank">ABCD</a>. All rights reserved.<div id="FSPpageTitle" fsp="pageTitle"></div></section>

CODEPEN链接： http ：//codepen.io/Lipak/pen/RKGvRK

请帮忙 ！！

Answer 1

您想要z而不是s ，因为s是find的结果。

即

alert(z.html());

之所以看不到外部section是因为html（）返回内部HTML。 您可以使用alert(z[0].outerHTML)正确查看它。

z[0]返回jQuery包装的元素的基础DOM元素，从中您可以显示常规DOM属性，例如outerHTML 。

Codepen： http ：//codepen.io/anon/pen/EZgMjN

关于您在评论中添加的其他问题，关于提供完整的HTML： $()删除了顶级html元素。 基本上，您无法做到这一点，因为$()使DOM稍微扁平化而忽略了诸如HEAD和HTML（以及DOCTYPE）之类的元素

Answer 2

以这种方式执行此操作，您只需更新H1标签的HTML，但不选择更新的HTML，请尝试以下操作。

var test = '<section class="fine-print clearfix"><p class="copyright">&#169; 2012 by <a href="test.com" target="_blank">ABCD</a>. All rights reserved.<h1 class="page-title">Default Template</h1></section>';

var x = $(test);
var z = x.clone();
z.find('.page-title').html('<div id="FSPpageTitle" fsp="pageTitle"></div>');
alert(z[0].outerHTML);