如何將 append 文本發送到 `<div> `?</div><div id="text_translate"><p> 我正在使用 AJAX 到 append 數據到&lt;div&gt;元素，其中我從 JavaScript 填充&lt;div&gt; 。 我怎樣才能將 append 新數據添加到&lt;div&gt;而不丟失之前在其中找到的數據？</p></div>

Question

我正在使用 AJAX 到 append 數據到<div>元素，其中我從 JavaScript 填充<div> 。 我怎樣才能將 append 新數據添加到<div>而不丟失之前在其中找到的數據？

Answer 1

嘗試這個：

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

div.innerHTML += 'Extra stuff';

Answer 2

使用 appendChild：

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

使用內部HTML：
這種方法將刪除@BiAiB 提到的現有元素的所有偵聽器。 因此，如果您打算使用此版本，請謹慎使用。

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

Answer 3

小心innerHTML ，當你使用它時你會失去一些東西：

theDiv.innerHTML += 'content';

相當於：

theDiv.innerHTML = theDiv.innerHTML + 'content';

這將破壞div所有節點並重新創建新節點。 對其中元素的所有引用和偵聽器都將丟失。

如果您需要保留它們（例如，當您附加了點擊處理程序時），您必須使用 DOM 函數（appendChild,insertAfter,insertBefore）附加新內容：

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

Answer 4

如果您想快速完成並且不想丟失引用和偵聽器，請使用： .insertAdjacentHTML() ;

“它不會重新解析它正在使用的元素，因此它不會破壞元素內的現有元素。這和避免額外的序列化步驟使它比直接的 innerHTML 操作快得多。”

支持所有主流瀏覽器（IE6+、FF8+、所有其他瀏覽器和移動設備）： http : //caniuse.com/#feat=insertadjacenthtml

來自https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML 的示例

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

Answer 5

如果您使用的是 jQuery，則可以使用$('#mydiv').append('html content')它將保留現有內容。

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

Answer 6

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 攻擊向量。

Answer 7

即使這樣也可以：

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

div.innerHTML += 'Text to append';

Answer 8

你可以使用jQuery。 這使它非常簡單。

只需下載 jQuery 文件，將 jQuery 添加到您的 HTML 中
或者您可以使用在線鏈接：

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

試試這個：

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

Answer 9

以下方法不如其他方法通用，但是當您確定 div 的最后一個子節點已經是文本節點時，它會很棒。 這樣你就不會使用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");

Answer 10

我認為比目前提到的任何一個更好的選項是Element.insertAdjacentText() 。

 // Example listener on a child element // Included in this snippet to show that the listener does not get corrupted document.querySelector('button').addEventListener('click', () => { console.log('click'); }); // to actually insert the text: document.querySelector('div').insertAdjacentText('beforeend', 'more text');

 <div> <button>click</button> </div>

這種方法的優點包括：

• 不修改 DOM 中的現有節點； 不會破壞事件監聽器
• 插入文本，而不是 HTML（在故意插入 HTML 時最好只使用.insertAdjacentHTML - 不必要地使用它在語義上不太合適，並且會增加 XSS 的風險）
• 靈活的; .insertAdjacentText的第一個參數可能是beforebegin 、 beforeend 、 afterbegin 、 afterend ，具體取決於您希望將文本插入的位置

Answer 11

腳本

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

查詢

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

使用不帶任何參數的.html()來查看您已輸入。 在您的代碼中使用這些功能之前，您可以使用瀏覽器控制台快速測試它們。

Answer 12

為什么不直接使用 setAttribute ？

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

然后你可以通過以下方式獲取這些數據：

thisDiv.attrName;