如何在div现有文本前添加新文本？

要把新文本插到div原有内容的前面，有几种简单实用的实现方式：

1. 直接拼接innerHTML（最直观） #

这种方式和你原来用innerHTML +=的思路相反，把新文本放在原有内容的前面重新赋值即可：

const divWithText = document.querySelector(".div-with-text");
divWithText.innerHTML = 'Text before' + divWithText.innerHTML;

对应HTML：

<div class="div-with-text">Text after</div>

2. 使用insertAdjacentHTML（更高效） #

如果div内部有复杂的DOM结构，推荐用这个方法——它不会重新解析整个元素的内容，只会在指定位置插入新内容，afterbegin代表元素内部的最起始位置：

const divWithText = document.querySelector(".div-with-text");
divWithText.insertAdjacentHTML('afterbegin', 'Text before');

3. 纯文本场景用prepend（更安全） #

如果只是插入纯文本，不需要解析HTML标签，用prepend更安全，还能避免潜在的XSS风险：

const divWithText = document.querySelector(".div-with-text");
divWithText.prepend('Text before');

内容的提问来源于stack exchange，提问作者yanksi_