จะผนวกข้อมูลเพื่อ div โดยใช้ JavaScript ได้อย่างไร

ฉันใช้ AJAX ต่อท้ายข้อมูลเพื่อ div องค์ประกอบที่ฉันกรอก div จาก JavaScript ฉันจะผนวกข้อมูลใหม่ไปยัง div ได้อย่างไรโดยไม่สูญเสียข้อมูลก่อนหน้านี้ที่พบใน div

ลองสิ่งนี้:

var div = document.getElementById('divID');

div.innerHTML += 'Extra stuff';

ใช้ appendChild:

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
var content = document.createTextNode("<YOUR_CONTENT>");
theDiv.appendChild(content);

การใช้ innerHTML:
วิธีการนี้จะลบผู้ฟังทั้งหมดไปยังองค์ประกอบที่มีอยู่ตามที่ระบุโดย @BiAiB ดังนั้นควรใช้ความระมัดระวังหากคุณวางแผนที่จะใช้เวอร์ชันนี้

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
theDiv.innerHTML += "<YOUR_CONTENT>"; 

ระวังinnerHTMLคุณจะสูญเสียบางสิ่งเมื่อคุณใช้:

theDiv.innerHTML += 'content',     

เทียบเท่ากับ:

theDiv.innerHTML = theDiv.innerHTML + 'content'

ซึ่งจะทำลายโหนดทั้งหมดที่อยู่ภายในของคุณdivและสร้างใหม่ อ้างอิงและผู้ฟังทุกองค์ประกอบภายในมันจะหายไป

หากคุณต้องการเก็บไว้ (เมื่อคุณแนบ handler คลิก) คุณต้องผนวกเนื้อหาใหม่ด้วยฟังก์ชัน DOM (appendChild, insertAfter, insertBefore):

var newNode = document.createElement('div');      
newNode.innerHTML = data;
theDiv.appendChild( newNode )

หากคุณต้องการทำอย่างรวดเร็วและไม่ต้องการสูญเสียการอ้างอิงและผู้ฟังให้ใช้: .insertAdighborHTML () ;

"มันไม่ได้แยกองค์ประกอบที่มันถูกใช้ไปและทำให้มันไม่เสียหายองค์ประกอบที่มีอยู่ภายในองค์ประกอบนี้และการหลีกเลี่ยงขั้นตอนพิเศษของการทำให้เป็นอันดับทำให้มันเร็วกว่าการควบคุมภายใน HTML โดยตรง"

สนับสนุนบนเบราว์เซอร์ mainline ทั้งหมด (IE6 +, FF8 +, อื่น ๆ ทั้งหมดและมือถือ): http://caniuse.com/#feat=insertadjacenthtml

ตัวอย่างจากhttps://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdighborHTML

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

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

หากคุณใช้ jQuery คุณสามารถใช้$('#mydiv').append('html content')และมันจะเก็บเนื้อหาที่มีอยู่

http://api.jquery.com/append/

แม้จะใช้งานได้:

var div = document.getElementById('divID');

div.innerHTML += 'Text to append';

โซลูชัน IE9 + (Vista +) โดยไม่ต้องสร้างโหนดข้อความใหม่:

var div = document.getElementById("divID");
div.textContent += data + " ";

อย่างไรก็ตามสิ่งนี้ไม่ได้ทำเคล็ดลับสำหรับฉันเนื่องจากฉันต้องการบรรทัดใหม่หลังจากแต่ละข้อความดังนั้น DIV ของฉันจึงเปลี่ยนเป็น UL สไตล์ที่มีรหัสนี้:

var li = document.createElement("li");
var text = document.createTextNode(data);
li.appendChild(text);
ul.appendChild(li);

จากhttps://developer.mozilla.org/en-US/docs/Web/API/Node/textContent :

ความแตกต่างจาก innerHTML

innerHTML ส่งคืน HTML ตามที่ชื่อระบุ บ่อยครั้งในการดึงหรือเขียนข้อความภายในองค์ประกอบคนใช้ InnerHTML ควรใช้ textContent แทน เนื่องจากข้อความไม่ได้ถูกแยกวิเคราะห์เป็น HTML จึงน่าจะมีประสิทธิภาพดีกว่า นอกจากนี้ยังเป็นการหลีกเลี่ยงเวกเตอร์การโจมตี XSS

คุณสามารถใช้ jQuery ซึ่งทำให้มันง่ายมาก

เพียงดาวน์โหลดไฟล์ jQuery เพิ่ม jQuery ใน HTML ของคุณ
หรือคุณสามารถลิงค์ออนไลน์:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

และลองสิ่งนี้:

 $("#divID").append(data);

วิธีการต่อไปนี้เป็นวิธีทั่วไปน้อยกว่าวิธีอื่น ๆ แต่มันยอดเยี่ยมเมื่อคุณแน่ใจว่าโหนดลูกสุดท้ายของ div นั้นเป็นโหนดข้อความอยู่แล้ว ด้วยวิธีนี้คุณจะไม่สร้างโหนดข้อความใหม่โดยใช้appendData AppendData MDN Reference

let mydiv = document.getElementById("divId");
let lastChild = mydiv.lastChild;

if(lastChild && lastChild.nodeType === Node.TEXT_NODE ) //test if there is at least a node and the last is a text node
   lastChild.appendData("YOUR TEXT CONTENT");

ทำไมไม่ใช้แค่ setAttribute?

thisDiv.setAttribute('attrName','data you wish to append');

จากนั้นคุณสามารถรับข้อมูลนี้ได้โดย:

thisDiv.attrName;

จาวาสคริปต์

document.getElementById("divID").html("this text will be added to div");

jQuery

$("#divID").html("this text will be added to div");

ใช้.html()โดยไม่มีข้อโต้แย้งใด ๆ เพื่อดูว่าคุณได้ป้อน คุณสามารถใช้คอนโซลเบราว์เซอร์เพื่อทดสอบฟังก์ชั่นเหล่านี้อย่างรวดเร็วก่อนที่จะใช้ในโค้ดของคุณ