JavaScript - innerHTML

Question

Ben innerHTML kullanmadan bir muhafaza elemanına HTML eklemek için bir yol gerekir olmadan muhafaza elemanına HTML ekleyin.

element.innerHTML += htmldata

O html tüm değiştirerek çalışır Önce eski html artı yeni html eklemeden önce: böyle kullanmak edildiğinde çünkü innerHTML kullanmak istemiyorum nedeni budur. Böyle gömülü flaş video gibi dinamik medya sıfırlar çünkü bu

ben o işleri bu şekilde yapabilirdi ... iyi değil:

var e = document.createElement('span'); 
e.innerHTML = htmldata; 
element.appendChild(e); 

Ancak bu şekilde sorun ekstra sürede o olmasıdır şimdi istemediğim belgede etiket.

Bu nasıl sonra yapılabilir? Teşekkürler!

Answer 1

.childNodes (çalışmak için görünmüyor DocumentFragment kullanma gibi) bir alternatif vermek için: yeni oluşturulan düğümün çocukları üzerinde yineleme bunu taklit ve sadece bu ekleyebilirsiniz.

var e = document.createElement('div'); 
e.innerHTML = htmldata; 

while(e.firstChild) { 
    element.appendChild(e.firstChild); 
} 

Answer 2

Bu için doğmuşum DocumentFragment olduğunu.

var frag = document.createDocumentFragment(); 
var span = document.createElement("span"); 
span.innerHTML = htmldata; 
for (var i = 0, ii = span.childNodes.length; i < ii; i++) { 
    frag.appendChild(span.childNodes[i]); 
} 
element.appendChild(frag); 

document.createDocumentFragment ,

Answer 3

Ben cevapların hiçbiri insertAdjacentHTML() yöntem söz şaşırıyorum. here'a bakın. İlk parametre eklenmiş dizeyi istediğiniz yerde alır ve alır ("beforebegin", "afterbegin", "beforeend", "afterend"). OP'nin durumunda "önceki" yi kullanırdınız. İkinci parametre sadece html dizesidir.

Temel kullanım:

var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>'); 

Answer 4

<div id="Result"> 
</div> 

<script> 
for(var i=0; i<=10; i++){ 
var data = "<b>vijay</b>"; 
document.getElementById('Result').innerHTML += data; 
} 
</script> 

"+ =" önceki html verileri

Answer 5

element.innerHTML *+=* htmldata dahil verileri ekleyin sembolü ile div için verileri atamak - hayır

denemede - element.innerHTML **=+** htmldata Bir şeyi değiştirmek istemiyorsanız - sadece yeni veri ekleyin.

Answer 6

alnafie bu soru için büyük bir cevabı vardır. Ben referans için onun kodu örneği vermek istedim:

var childNumber = 3; 
 

 
function addChild() { 
 
    var parent = document.getElementById('i-want-more-children'); 
 
    var newChild = '<p>Child ' + childNumber + '</p>'; 
 
    parent.insertAdjacentHTML('beforeend', newChild); 
 
    childNumber++; 
 
}

body { 
 
    text-align: center; 
 
} 
 
button { 
 
    background: rgba(7, 99, 53, .1); 
 
    border: 3px solid rgba(7, 99, 53, 1); 
 
    border-radius: 5px; 
 
    color: rgba(7, 99, 53, 1); 
 
    cursor: pointer; 
 
    line-height: 40px; 
 
    font-size: 30px; 
 
    outline: none; 
 
    padding: 0 20px; 
 
    transition: all .3s; 
 
} 
 
button:hover { 
 
    background: rgba(7, 99, 53, 1); 
 
    color: rgba(255,255,255,1); 
 
} 
 
p { 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
}

<button type="button" onclick="addChild()">Append Child</button> 
 
<div id="i-want-more-children"> 
 
    <p>Child 1</p> 
 
    <p>Child 2</p> 
 
</div>

Umarım bu başkalarına yararlı olur.