克隆對象和硬編碼HTML之間的區別HTML

-4

場景是複製#first在#test的內部，下面是實現它的2個場景，哪個是實現的最佳方式，爲什麼？克隆對象和硬編碼HTML之間的區別HTML

<div class="first"> 
    <div class="second">1</div> 
</div> 

<div class="test"> 
    <div>--------------</div> 
</div>

JQUERY1：

var cloner = $('.first').clone().prop({ 
    'class': 'changed_first' 
}); 
$('.test').append(cloner) 
$('.changed_first > .second').attr('class', 'changed_second'); 
$('.changed_first > .second').html('2');

上JQUERY1迂迴問題：有在克隆方法中的可能性來更改內部元件的特性？

JQUERY2：

$('.test').append('<div class="changed_first"><div class="changed_second">2</div></div>');

來源

2017-07-14 yogi

問計「最好的」方法是一個非常模糊的術語，它需要更多的定義，最好的速度，或最短的代碼，或...？我沒有測試過，但我會假設第二種方法是最快的，因爲您只能進行一次DOM訪問。儘管如此，這不是非常容易維護。 –

如果您在插入之前修改克隆，那麼只需修改一次DOM即可，「cloneNode」通常很快 – adeneo

https://jsfiddle.net/adeneo/vodf2ebs/ – adeneo

您使用克隆將是一個很好的的第一個方法。

是的，你可以在將它綁定到dom之前操作克隆的元素。

如果你想你綁定，如果在任何地方之前訪問任何ID或類克隆的元素，你可以像

var cloner = $('.first').clone().prop({ 
    'class': 'changed_first' 
}); 

cloner.find('#id').css('something','css-value'); 
var data_id = cloner.find('.class').attr('data-bind');

來源

2017-07-14 12:13:53

確切的答案我正在尋找，謝謝 – yogi

我可以知道爲什麼第一種方法是好的嗎？ – yogi

因爲如果你將使用第二種方法，你不能再編寫更多的jQuery，直到你將生成的內容附加到DOM的一些現有元素。正如我所說的，在克隆之前，您可以給任何CSS，或者甚至可以在將元素放入HTML代碼之前修改它們。簡而言之，你可以在任何地方附加它之前操作'cloner'變量。 –

克隆對象和硬編碼HTML之間的區別HTML

回答

相關問題