JavaScript动态向HTML添加内容的方法

在网页开发中，经常需要通过 Javascript 动态地向现有的 HTML 结构中添加新的内容。这可以通过使用 insertAdjacentHTML 和 insertAdjacentText 方法来实现。

方法说明：

• element.insertAdjacentHTML(position, text)：此方法用于解析文本作为 HTML 并将结果节点插入到 DOM 树中的指定位置。


• element.insertAdjacentText(position, text)：此方法用于将文本插入到 DOM 树中的指定位置，而不解析为 HTML。

参数解释：

• position 参数指定了新内容相对于目标元素的具体插入位置，必须是下列值之一：
  
  
  
  • 'beforebegin'：在目标元素之前插入。
  
  
  • 'afterbegin'：在目标元素内部的起始处插入。
  
  
  • 'beforeend'：在目标元素内部的末尾处插入。
  
  
  • 'afterend'：在目标元素之后插入。
  
  


• text 参数表示要插入的文本或 HTML 字符串。

这两个方法提供了灵活的方式来操作页面内容，使得开发者可以在不重载整个页面的情况下更新或增强用户界面。更多详细信息和示例代码可以参考 MDN Web 文档：MDN Web Docs - Element.insertAdjacentHTML()。