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