.html（）不返回克隆的DOM子樹的修改版本

Question

看一下包含單選按鈕input的簡單小div 。 然后查看抓取div並使用.clone()克隆的Javascript，將其保存到變量y ，然后在其中找到input元素，然后對其進行迭代以修改它們-應該取消選中單選按鈕-但是當我使用.html()打印div時，單選按鈕仍處於選中狀態！ 但為什么？ 以及如何獲取.html()返回未經檢查的版本？

 var y = $('div.foo').clone(); console.log(y.html()); y.find('input').each(function(index, el) { $(el).prop('checked', false); // turn off the radio button }); console.log(y.html()); //$('input[name=x_0]').prop('checked', false); // this will do it 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="foo"> <input type="radio" name="x_0" value="email" checked="checked"> email </div> 

Answer 1

更改dom元素的屬性不會更改HTML-如果更新input的值，則不會更新html表示<input value='whatever'/> ，HTML保持不變，但是dom元素的屬性已更改。 如果你也想改變HTML，你必須使用.attr ：

 var y = $('div.foo').clone(); console.log(y.html()); y.find('input').each(function(index, el) { $(el).prop('checked', false) $(el).attr('checked', null); // turn off the radio button }); console.log(y.html()); //$('input[name=x_0]').prop('checked', false); // this will do it 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="foo"> <input type="radio" name="x_0" value="email" checked="checked"> email </div>