DOM'a HTML dizesi ekleme

Bu HTML dizesi nasıl eklenir

var str = '<p>Just some <span>text</span> here</p>';

DOM'da bulunan kimliğe 'test'sahip DIV'ye?

(Btw div.innerHTML += str;kabul edilmez.)

insertAdjacentHTMLVarsa kullanın , aksi takdirde bir çeşit geri dönüş kullanın. insertAdjacentHTML mevcut tüm tarayıcılarda desteklenmektedir .

div.insertAdjacentHTML( 'beforeend', str );

Canlı demo: http://jsfiddle.net/euQ5n/

Bu kabul edilebilir mi?

var child = document.createElement('div');
child.innerHTML = str;
child = child.firstChild;
document.getElementById('test').appendChild(child);

jsFiddle .

Ama , Neil'in cevabı daha iyi bir çözümdür.

Verim

AppendChild(E) krom ve safarideki diğer çözümlerden 2 kat daha hızlıdır, insertAdjacentHTML(F) firefox'ta en hızlısıdır. innerHTML=(B) (ile değil şaşırtmak do +=) A () tüm tarayıcılarda ikinci hızlı bir çözümdür ve E ve F çok daha kullanışlı

ayrıntılar

Chrome 75.0.3770 (64-bit), Safari 11.1.0 (13604.5.6), Firefox 67.0.0 (64-bit) üzerinde ortam kurma (2019.07.10) MacOs High Sierra 10.13.4

• Chrome E'de (saniyede 140 bin işlem) en hızlı, B (47k) ve F (46k) ikinci, A (332) en yavaş
• firefox'ta F (94k) en hızlı, sonra B (80k), D (73k), E (64k), C (21k) en yavaş A (466)
• Safari'de E (207k) en hızlısı, sonra B (89k), F (88k), D (83k), C (25k), en yavaş A (509)

Burada makinenizde testi tekrar oynayabilirsiniz

function A() {    
  container.innerHTML += '<p>A: Just some <span>text</span> here</p>';
}

function B() {    
  container.innerHTML = '<p>B: Just some <span>text</span> here</p>';
}

function C() {    
  $('#container').append('<p>C: Just some <span>text</span> here</p>');
}

function D() {
  var p = document.createElement("p");
  p.innerHTML = 'D: Just some <span>text</span> here';
  container.appendChild(p);
}

function E() {    
  var p = document.createElement("p");
  var s = document.createElement("span"); 
  s.appendChild( document.createTextNode("text ") );
  p.appendChild( document.createTextNode("E: Just some ") );
  p.appendChild( s );
  p.appendChild( document.createTextNode(" here") );
  container.appendChild(p);
}

function F() {    
  container.insertAdjacentHTML('beforeend', '<p>F: Just some <span>text</span> here</p>');
}

A();
B();
C();
D();
E();
F();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This snippet only for show code used in test (in jsperf.com) - it not perform test itself. 
<div id="container"></div>

Buradaki fikir, innerHTMLbir aracı öğe üzerinde kullanmak ve ardından tüm alt düğümlerini gerçekten istediğiniz yere taşımaktır appendChild.

var target = document.getElementById('test');
var str = '<p>Just some <span>text</span> here</p>';

var temp = document.createElement('div');
temp.innerHTML = str;
while (temp.firstChild) {
  target.appendChild(temp.firstChild);
}

Bu, herhangi bir olay işleyicisinin silinmesini önler, div#testancak yine de bir HTML dizesi eklemenize izin verir.

Doğru yol kullanmaktır insertAdjacentHTML. Daha önce 8'den Firefox'ta, kullanmakta geri düşebilir Range.createContextualFragmentsenin eğer strhiçbir içeriyor scriptetiketleri.

Eğer senin striçeren scriptetiketler, kaldırmak gerekir scripttarafından döndürülen parçasından elemanları createContextualFragmentfragman takmadan önce. Aksi takdirde, betikler çalışacaktır. ( insertAdjacentHTMLkomut dosyalarını yürütülemez olarak işaretler.)

Hızlı Hack :

<script>
document.children[0].innerHTML="<h1>QUICK_HACK</h1>";
</script>

Kullanım Durumları :

1: .html dosyası olarak kaydedin ve chrome veya firefox veya edge'de çalıştırın. (IE işe yaramaz)

2: http : //js.do'da kullanın

Eylemde: http://js.do/HeavyMetalCookies/quick_hack

Yorumlarla ayrıldı:

<script>

//: The message "QUICK_HACK" 
//: wrapped in a header #1 tag.
var text = "<h1>QUICK_HACK</h1>";

//: It's a quick hack, so I don't
//: care where it goes on the document,
//: just as long as I can see it.
//: Since I am doing this quick hack in
//: an empty file or scratchpad, 
//: it should be visible.
var child = document.children[0];

//: Set the html content of your child
//: to the message you want to see on screen.
child.innerHTML = text;

</script>

Yayınlamamın Nedeni:

JS.do'nun sahip olması gereken iki şey vardır:

1. Otomatik tamamlama yok
2. Dikey monitör dostu

Ancak console.log mesajlarını göstermez. Hızlı bir çözüm bulmak için buraya geldim. Sadece birkaç satırlık kazı kazan kodunun sonuçlarını görmek istiyorum, diğer çözümler çok fazla iş.

Bu neden kabul edilemez?

document.getElementById('test').innerHTML += str

bunu yapmanın ders kitabı yolu olurdu.

Bu çözebilir

 document.getElementById("list-input-email").insertAdjacentHTML('beforeend', '<div class=""><input type="text" name="" value="" class="" /></div>');

InnerHTML, mevcut düğümler için olay gibi tüm verileri temizler

firstChild ile alt öğe eklemek, yalnızca ilk çocuğu innerHTML'ye ekler. Örneğin, eklememiz gerekirse:

 <p>text1</p><p>text2</p>

sadece metin1 görünecek

Peki buna ne dersin:

İç HTML'ye child ekleyerek özel etiket ekler ve ardından oluşturduğumuz etiketi silerek dış HTML'yi düzenler. Ne kadar akıllı olduğunu bilmiyorum ama benim için çalışıyor ya da externalHTML'yi innerHTML'ye çevirebilirsin, böylece işlev değiştirmeyi kullanmak zorunda kalmaz

function append(element, str)
{

  var child = document.createElement('someshittyuniquetag');
		
  child.innerHTML = str;

  element.appendChild(child);

  child.outerHTML = child.outerHTML.replace(/<\/?someshittyuniquetag>/, '');

// or Even child.outerHTML = child.innerHTML


  
}

<div id="testit">
This text is inside the div
<button onclick="append(document.getElementById('testit'), '<button>dadasasdas</button>')">To div</button>
<button onclick="append(this, 'some text')">to this</button>
</div>

En kısa - 18 karakter (karıştırmayın +=(OP ile bahsedilir) burada= daha fazla ayrıntıyla )

test.innerHTML=str

var str = '<p>Just some <span>text</span> here</p>';

test.innerHTML=str

<div id="test"></div>