การต่อท้ายสตริง HTML เข้ากับ DOM

วิธีต่อท้ายสตริง HTML นี้

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

ไปยัง DIV ด้วย ID 'test'ซึ่งอยู่ใน DOM?

(Btw div.innerHTML += str;ไม่เป็นที่ยอมรับ)

ใช้insertAdjacentHTMLหากมีหรือใช้ทางเลือกบางประเภท insertAdjacentHTML รับการสนับสนุนในเบราว์เซอร์ในปัจจุบันทั้งหมด

div.insertAdjacentHTML( 'beforeend', str );

การสาธิตสด: http://jsfiddle.net/euQ5n/

เป็นที่ยอมรับหรือไม่?

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

jsFiddle

แต่ , คำตอบของนีลเป็นทางออกที่ดีกว่า

ประสิทธิภาพ

AppendChild(E) เร็วกว่าโซลูชันอื่น ๆ บน Chrome และ Safari มากกว่า 2 เท่าinsertAdjacentHTML(F) เร็วกว่าใน Firefox innerHTML=(B) (อย่าสับสนกับ+=(A)) เป็นวิธีที่รวดเร็วที่สองในเบราว์เซอร์และมันก็เป็นประโยชน์มากขึ้นกว่าอีและเอฟ

รายละเอียด

ตั้งค่าสภาพแวดล้อม (2019.07.10) MacOs High Sierra 10.13.4 บน Chrome 75.0.3770 (64 บิต), Safari 11.1.0 (13604.5.6), Firefox 67.0.0 (64 บิต)

• บน Chrome E (140k การทำงานต่อวินาที) เร็วที่สุด B (47k) และ F (46k) เป็นอันดับสอง A (332) ช้าที่สุด
• บน firefox F (94k) นั้นเร็วที่สุดจากนั้น B (80k), D (73k), E (64k), C (21k) ที่ช้าที่สุดคือ A (466)
• บน Safari E (207k) เร็วที่สุดจากนั้น B (89k), F (88k), D (83k), C (25k), ช้าที่สุดคือ A (509)

คุณสามารถเล่นการทดสอบซ้ำในเครื่องของคุณได้ที่นี่

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>

ความคิดที่จะใช้ในองค์ประกอบตัวกลางและจากนั้นย้ายทั้งหมดของโหนดลูกของตนเพื่อที่คุณต้องการจริงๆพวกเขาผ่านทางinnerHTMLappendChild

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);
}

วิธีนี้จะหลีกเลี่ยงการล้างตัวจัดการเหตุการณ์ใด ๆ ที่เปิดอยู่div#testแต่ยังช่วยให้คุณสามารถต่อท้ายสตริง HTML ได้

insertAdjacentHTMLวิธีที่ถูกต้องคือการใช้ ใน Firefox ก่อนหน้า 8 คุณสามารถกลับไปใช้งานได้Range.createContextualFragmentหากstrไม่มีscriptแท็ก

หากคุณstrมีscriptแท็กคุณจะต้องลบscriptองค์ประกอบออกจากส่วนที่ส่งคืนcreateContextualFragmentก่อนที่จะแทรกส่วน มิฉะนั้นสคริปต์จะทำงาน ( insertAdjacentHTMLทำเครื่องหมายว่าสคริปต์ไม่สามารถเรียกใช้งานได้)

แฮ็คด่วน:

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

ใช้กรณี :

1: บันทึกเป็นไฟล์. html และเรียกใช้ใน chrome หรือ firefox หรือ edge (IE เคยชิน)

2: ใช้ในhttp://js.do

ในการดำเนินการ: http://js.do/HeavyMetalCookies/quick_hack

แยกย่อยด้วยความคิดเห็น:

<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>

เหตุผลที่ฉันโพสต์:

JS.do มีสองสิ่งที่ต้องมี:

1. ไม่มีการเติมข้อความอัตโนมัติ
2. เป็นมิตรกับจอภาพแนวตั้ง

แต่ไม่แสดงข้อความ console.log มาที่นี่เพื่อหาวิธีแก้ปัญหาอย่างรวดเร็ว ฉันแค่อยากเห็นผลลัพธ์ของโค้ด scratchpad สองสามบรรทัดวิธีแก้ปัญหาอื่น ๆ ใช้งานได้มากเกินไป

เหตุใดจึงไม่เป็นที่ยอมรับ

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

คงเป็นวิธีการทำตามตำรา

สิ่งนี้สามารถแก้ได้

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

InnerHTML ล้างข้อมูลทั้งหมดเช่นเหตุการณ์สำหรับโหนดที่มีอยู่

ต่อท้ายเด็กด้วย firstChild เพิ่มลูกคนแรกเท่านั้นใน innerHTML ตัวอย่างเช่นหากเราต้องต่อท้าย:

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

เฉพาะ text1 เท่านั้นที่จะปรากฏขึ้น

แล้วสิ่งนี้:

เพิ่มแท็กพิเศษใน innerHTML โดยต่อท้ายเด็กจากนั้นแก้ไข outerHTML โดยการลบแท็กที่เราสร้างขึ้น ไม่รู้ว่ามันฉลาดแค่ไหน แต่มันใช้ได้สำหรับฉันหรือคุณอาจเปลี่ยน outerHTML เป็น innerHTML เพื่อที่จะได้ไม่ต้องใช้ function replace

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>

สั้นที่สุด - 18 ตัวอักษร (อย่าสับสน+=(พูดถึงโดย OP) มี=รายละเอียดเพิ่มเติมที่นี่ )

test.innerHTML=str

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

test.innerHTML=str

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