Bu sayfada bir DİV x var ve çoğaltmak istiyoruz diyelim ("kopyala-yapıştır") 6* *başka bir DİV içine DİV içeriğini. Bu gibi yapabiliriz:

y.innerHTML = x.innerHTML;

ya da bir WordPress kullanmak:

$(y).html( $(x).html() );

Ancak, bu yöntem iyi bir fikir değil, olabilir gibi görünüyor.

(1) Neden bu yöntemi kaçınılmalıdır.

(2) onun yerine şuna Ne yapılması gerekir?

Güncelleme:
Bu soru uğruna hadi DİV x içinde KİMLİK unsurları vardır hayır varsayalım.
(Üzgünüm benim asıl sorum bu durumda kapak için unuttum.)

Sonuç:
Bu soru altında aslında gerektiği gibi) kendi cevabımı attılar. Şimdi, ben de :P ama lonesomeday cevap yerine kabul etmek zorunda olduğum çok harika kendi cevabımı kabul etmek için planlanmış.

Bu yöntem, "Kopyalama" Bir yerden HTML öğeleri başka bir tarayıcı ne bir yanlışlık sonucudur. Tarayıcılar bellekte bir HTML belgesi bir yerde tutmak ve sürekli olarak JavaScript komutları temel HTML değiştirmek yok.

Bir tarayıcı ilk sayfa yüklendiğindeayrıştırırbelgeyi HTML ve DOM bir yapıya dönüşüyor. Bu W3C standart aşağıdaki nesneleri (çoğunlukla...) bir ilişkidir. Orijinal HTML tamamen gereksiz o zaman. Tarayıcı orijinal HTML yapısı ne olduğunu umursamıyor; web sayfasının kavrayışıyla oluşturulan DOM yapısı. Eğer HTML biçimlendirme hatalı/geçersiz olsaydı, web tarayıcı tarafından herhangi bir şekilde düzeltilecektir; DOM yapısını herhangi bir şekilde geçersiz kod içermez.

Temelde, HTML, internet üzerinden geçirilecek bir DOM yapı serialising veya bir dosyayı yerel olarak saklanan bir yol olarak değerlendirilmelidir.

Bu nedenle, varolan bir web sayfasını değiştirmek için kullanılmamalıdır. DOM (Belge Nesne Modeli) bir sayfanın içeriğini değiştirmek için bir sistem vardır. Bu HTML serialisation üzerinde düğümler arasındaki ilişki, değil temel alır. A li eklediğinizde ul, Bu iki seçenek (ul liste öğesi olduğunu varsayarak):

// option 1: innerHTML
ul.innerHTML  = '<li>foobar</li>';

// option 2: DOM manipulation
var li = document.createElement('li');
li.appendChild(document.createTextNode('foobar'));
ul.appendChild(li);

Şimdi, ilk seçenek çok daha basit görünüyor, ama bu sadece çünkü tarayıcı var soyutlanmış bir sürü uzakta size: dahili tarayıcı var dönüştürmek elemanın çocuklar için bir dize, sonra biraz içerik Ekle, o zaman dize dönüştürmek için bir DOM yapısı. İkinci seçenek ne tarayıcı doğal anlama karşılık gelir.

İkinci önemli husus HTML kısıtlamaları hakkında düşünmektir. Bir web sayfası hakkında düşündüğümüz zaman, her öğe için ilgili HTML serialised olabilir. Örneğin, olay işleyicileri x.onclick = function(); x.addEventListener(...) ile ilişkili kopyalanan arasında olmayacak innerHTML, çoğaltılmış olmayacaktır. y yeni elemanları olay dinleyicileri zorunda kalmayacak. Bu muhtemelen senin istediğin şey değil.

Bu etrafında yolu yerel DOM yöntemleri ile çalışmak için:

for (var i = 0; i < x.childNodes.length; i  ) {
    y.appendChild(x.childNodes[i].cloneNode(true));
}

MDN belgeleri okuma muhtemelen işlerin bu şekilde anlamak için yardımcı olacaktır

• appendChild
• cloneNode
• childNodes

Şimdi bu yukarıdaki kod örneğinde seçenek 2 gibi) bir sorun olmasıdırçokayrıntılı innerHTML seçeneği çok daha uzun olurdu. Bu senin için böyle bir şey yapan bir JavaScript Kütüphanesi olan takdir zaman. JQuery örneğin,:

$('#y').html($('#x').clone(true, true).contents());

Bu çok olmasını istediğin şeyler hakkında daha açık. Yanı sıra, çeşitli performans faydaları olan ve olay işleyicileri koruyarak, örneğin, aynı zamanda kodunuzun ne yaptığını anlamak için yardımcı olur. Bu JavaScript programcısı olarak sizin ruh için iyi değildir ve tuhaf hatalar önemli ölçüde daha az Olası hale getirir!