textContent、innerHTML和insertAdjacentHTML是JavaScript中用于操作DOM元素内容的三种不同方法。每种方法都有其特定的用途和行为。
textContent
描述：textContent属性用于获取或设置指定节点及其后代的文本内容。
特点：当设置内容时，它会替换元素的所有子节点，并且只能设置文本内容，不能解析HTML标签。
使用场景：适用于当你只需要操作文本，而不需要HTML标签时。这种方法防止了HTML注入，更加安全。
innerHTML
描述：innerHTML属性用于获取或设置HTML或XML元素中的HTML内容。
特点：可以解析HTML标签，并将其渲染成对应的元素。使用此属性设置HTML内容时，浏览器会解析字符串并创建新的DOM树。
使用场景：当你需要包含HTML标签的内容时使用，但需要注意避免跨站脚本（XSS）攻击。
insertAdjacentHTML
描述：insertAdjacentHTML方法将指定的文本解析为HTML或XML，并将生成的节点插入到DOM树中的指定位置。
特点：它不会重新解析调用它的元素（从而不会破坏元素内部已经存在的DOM结构），而只是添加新的元素，这使得它相对于innerHTML来说性能更优。
参数：接受两个参数，第一个是插入位置（'beforebegin'、'afterbegin'、'beforeend'、'afterend'），第二个是要插入的HTML字符串。
使用场景：适用于需要将内容插入到元素内部或周围，而不是替换元素内部所有内容的情况。更适合动态添加内容，因为它允许更细致地控制插入的位置。

insertAdjacentHTML方法的使用场景包括但不限于以下几种：
动态内容插入：当你需要在页面上动态地插入新的HTML元素或内容时，insertAdjacentHTML可以让你指定插入的位置，而不需要替换或重写现有的元素内部HTML。
性能优化：如果你需要向页面中频繁添加元素，insertAdjacentHTML通常比innerHTML更高效，因为它不需要重新解析调用它的元素的内部HTML，这可以减少重绘和重排带来的性能开销。
避免直接DOM操作开销：直接使用DOM方法（如createElement和appendChild）创建和添加复杂的HTML结构可能很繁琐。相比之下，insertAdjacentHTML可以一次性插入整个HTML片段。
维持现有脚本和监听器：在不需要或不想干扰元素内部现有子节点的事件监听器或脚本运行的情况下，使用insertAdjacentHTML可以插入新内容而不影响现有内容。
页面模板填充：当使用模板文字来生成HTML内容时，可以使用insertAdjacentHTML将生成的内容插入到页面的指定位置。
快速原型和测试：在开发过程中，当需要快速测试或原型设计时，insertAdjacentHTML可以方便快速地将HTML片段加入页面。
插入位置参数
insertAdjacentHTML方法接收两个参数：第一个参数是一个表示相对位置的字符串，第二个参数是要插入的HTML字符串。第一个参数可以是以下四个值之一：
'beforebegin'：在当前元素之前插入HTML。
'afterbegin'：在当前元素的第一个子节点之前插入HTML。
'beforeend'：在当前元素的最后一个子节点之后插入HTML。
'afterend'：在当前元素之后插入HTML。
实例
假设你有一个列表，并且想要在列表的末尾添加新的列表项，可以使用insertAdjacentHTML如下：

var list = document.getElementById('myList');
list.insertAdjacentHTML('beforeend', '<li>新的列表项</li>');

这将在现有列表的最后添加一个新的