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 LINK：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);

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

2 个答案: