一个我认为比目前提到的任何一个都更好的选项是Element.insertAdjacentText()。

//子元素监听器的示例 //包含在这个代码片段中，以显示侦听器没有被损坏 document.querySelector(“按钮”)。addEventListener('click'， () => { console.log('点击'); })； //实际插入文本: document.querySelector (div)。insertAdjacentText('beforeend'， 'more text'); < div > <按钮>点击< /按钮> < / div >

这种方法的优点包括:

不修改DOM中的现有节点;不损坏事件侦听器 插入文本，而不是HTML(当故意插入HTML时，最好只使用.insertAdjacentHTML -不必要地使用它在语义上不太合适，并且会增加XSS的风险) 灵活的;.insertAdjacentText的第一个参数可以是beforebegin, beforeend, afterbegin, afterend，这取决于你想要插入文本的位置

如果你想要快速完成并且不想丢失引用和侦听器，请使用:.insertAdjacentHTML();

它不会重新解析它正在使用的元素，因此它不会破坏元素内部的现有元素。这一点，以及避免序列化的额外步骤，使其比直接innerHTML操作快得多。”

支持所有主流浏览器(IE6+， FF8+， all Others和Mobile): 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>

一个我认为比目前提到的任何一个都更好的选项是Element.insertAdjacentText()。

//子元素监听器的示例 //包含在这个代码片段中，以显示侦听器没有被损坏 document.querySelector(“按钮”)。addEventListener('click'， () => { console.log('点击'); })； //实际插入文本: document.querySelector (div)。insertAdjacentText('beforeend'， 'more text'); < div > <按钮>点击< /按钮> < / div >

这种方法的优点包括:

不修改DOM中的现有节点;不损坏事件侦听器 插入文本，而不是HTML(当故意插入HTML时，最好只使用.insertAdjacentHTML -不必要地使用它在语义上不太合适，并且会增加XSS的风险) 灵活的;.insertAdjacentText的第一个参数可以是beforebegin, beforeend, afterbegin, afterend，这取决于你想要插入文本的位置

小心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);

你可以使用jQuery。这就很简单了。

下载jQuery文件，将jQuery添加到你的HTML中 或者你可以使用在线链接:

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

试试这个:

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

使用列表末尾:

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