Làm cách nào để nối dữ liệu vào div bằng JavaScript?

Tôi đang sử dụng AJAX để nối thêm dữ liệu vào phần tử div, nơi tôi điền div từ JavaScript, làm cách nào tôi có thể nối thêm dữ liệu mới vào div mà không mất dữ liệu trước đó trong div?

Thử cái này:

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

div.innerHTML += 'Extra stuff';

Sử dụng appendChild:

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

Sử dụng InternalHTML:
Cách tiếp cận này sẽ loại bỏ tất cả người nghe đối với các yếu tố hiện có như được đề cập bởi @BiAiB. Vì vậy, hãy thận trọng nếu bạn đang có kế hoạch sử dụng phiên bản này.

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

Coi chừng innerHTML, bạn sẽ mất thứ gì đó khi sử dụng nó:

theDiv.innerHTML += 'content',     

Tương đương với:

theDiv.innerHTML = theDiv.innerHTML + 'content'

Điều này sẽ phá hủy tất cả các nút bên trong của bạn divvà tạo lại những cái mới.Tất cả các tài liệu tham khảo và người nghe các yếu tố bên trong nó sẽ bị mất .

Nếu bạn cần giữ chúng (ví dụ: khi bạn đã đính kèm trình xử lý nhấp chuột), bạn phải nối thêm nội dung mới bằng các hàm DOM (appendChild, insertAfter, insertB Before):

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

Nếu bạn muốn làm nhanh và không muốn mất tài liệu tham khảo và người nghe hãy sử dụng: .insertAdjighborHTML () ;

"Nó không lặp lại phần tử mà nó đang được sử dụng và do đó nó không làm hỏng các phần tử hiện có bên trong phần tử. Điều này và tránh bước thêm của tuần tự hóa làm cho nó nhanh hơn nhiều so với thao tác bên trong trực tiếp."

Được hỗ trợ trên tất cả các trình duyệt chính (IE6 +, FF8 +, Tất cả các trình duyệt khác và Di động): http://caniuse.com/#feat=insertadjighborhtml

Ví dụ từ https://developer.mozilla.org/en-US/docs/Web/API/Euity/insertAdjighborHTML

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

Nếu bạn đang sử dụng jQuery, bạn có thể sử dụng $('#mydiv').append('html content')và nó sẽ giữ nguyên nội dung hiện có.

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

Ngay cả điều này sẽ làm việc:

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

div.innerHTML += 'Text to append';

Giải pháp IE9 + (Vista +) mà không tạo các nút văn bản mới:

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

Tuy nhiên, điều này không thực sự giúp tôi vì tôi cần một dòng mới sau mỗi tin nhắn, vì vậy DIV của tôi đã biến thành một UL theo kiểu với mã này:

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

Từ https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent :

Sự khác biệt so với InternalHTML

InternalHTML trả về HTML như tên của nó chỉ ra. Rất thường xuyên, để truy xuất hoặc viết văn bản trong một phần tử, mọi người sử dụng InternalHTML. textContent nên được sử dụng thay thế. Vì văn bản không được phân tích cú pháp dưới dạng HTML, nên nó có thể có hiệu suất tốt hơn. Hơn nữa, điều này tránh một vectơ tấn công XSS.

bạn có thể sử dụng jQuery. mà làm cho nó rất đơn giản.

chỉ cần tải xuống tệp jQuery thêm jQuery vào HTML của bạn
hoặc bạn có thể sử dụng liên kết trực tuyến:

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

và thử điều này:

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

Phương thức sau ít tổng quát hơn các phương thức khác tuy nhiên thật tuyệt vời khi bạn chắc chắn rằng nút con cuối cùng của div đã là nút văn bản. Theo cách này, bạn sẽ không tạo nút văn bản mới bằng appendData MDN Reference AppendData

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

Tại sao không sử dụng setAttribution?

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

Sau đó, bạn có thể lấy dữ liệu này bằng cách:

thisDiv.attrName;

tập lệnh java

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

jquery

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

Sử dụng .html()mà không có bất kỳ đối số để thấy rằng bạn đã nhập. Bạn có thể sử dụng bảng điều khiển trình duyệt để nhanh chóng kiểm tra các chức năng này trước khi sử dụng chúng trong mã của bạn.