jquery - Jqueryは内部divを別のものに置き換えます

Question

ネストされた div を新しい div に置き換えようとしています。

html_string= "<div id='container'><div id='inner'></div></div>";

var newHtml = $(html_string).find("div#inner").replaceWith("<div>NEW CONTENT</div>").html();

console.log('new html is');
console.log(newHtml);
console.log('html_string is');
console.log(html_string);

しかし、私はの出力を取得します

new html is

html_string is 
<div id='container'><div id='inner'></div></div> 

入れ替わらない…

Answer 1

試す

html_string= "<div id='container'><div id='inner'></div></div>";

var newHtml = $(html_string).find("div#inner").replaceWith("<div>NEW CONTENT</div>").end().get(0).outerHTML;

console.log('new html is');
console.log(newHtml);
console.log('html_string is');
console.log(html_string);

デモ:フィドル

Answer 2

少し分解してください：

html_string = "<div id='container'><div id='inner'></div></div>";
var newHtml = $(html_string)
newHtml.find("div#inner").replaceWith("<div>NEW CONTENT</div>");

console.log('new html is:' + $(newHtml)[0].innerHTML);
console.log('html_string is' + $(html_string)[0].innerHTML);

- html_string は文字列であり、変更されないことに注意してください。- newHtml は jQuery オブジェクトであり、変更されます。

出力

>  new html is:<div>NEW CONTENT</div>
>  html_string is<div> id="inner"></div>