ページ全体をvarに読み込み、jQueryで操作してページに書き換えますか？

Question

これは可能ですか？下のコードを試してみて、何かが見当たりませんでしたか？

https://jsfiddle.net/Ld7t7wag/1/

$("h1").click(function(){ 
    var htmlvar = $('html')[0].outerHTML; 
    $(htmlvar).find("h1").html("NEWTITLE"); 
    $("html").html($("html", htmlvar).html()); 
}); 

Answer 1

（通常は、もちろん、あなたは単に私はあなたが別にフラグメントでこれをやりたいために十分な理由を持っていると仮定します。DOMに直接h1内容を変更しますページ自体、またはあなたが質問を気にしなかったであろう。）

// Get your html string from wherever: 
 
var htmlstr = $('#foo').html(); // or just a string 
 

 
// convert the string into a jQuery object: 
 
var fragment = $(htmlstr); 
 

 
// Manipulate its contents as needed: 
 
fragment.find("h1").html("NEWTITLE"); 
 

 
// Now put the changed HTML string wherever: 
 
$('#foo').html(fragment.html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="foo"><div>Here are some <h1>HTML tags</h1></div></div>

スニペットでやってみようとしているHTMLページ全体を置き換えることはできないと思います.すべてを上書きしようとしているスクリプトを含めてを上書きします。ほとんどの場合、bodyの内容を上書きします（以前はDOMに添付されていたイベントバインディングなどが破棄されるため、それでも残念ですが、変更をDOMツリーの一部として制限しようとします缶）

Answer 2

は、あなただけの<h1/>のテキストを変更し、すべて一緒のhtmlの全体を変更することを避けることができませんでしたか？それは私にとってかなり冗長なようです。

$(function() { 
 

 
    $("h1").click(function() { 
 
    $(this).text('NEWTITLE'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h1> 
 
    TEST 
 
</h1>