巧妙解决outerhtml和innerhtml的元素添加难题
在DOM操作中，使用outerHTML和innerHTML添加元素时，常常会遇到一些棘手的问题。例如，想将一个div元素及其内容添加到另一个元素dom_exeStartPrev之后，使用以下代码却无法达到预期效果：
dom_exeStartPrev.outerHTML = dom_exeStartPrev.outerHTML + div.innerHTML;
这是因为outerHTML会替换整个元素，而不是添加内容。
高效解决方案：
为了正确添加元素，避免outerHTML的替换行为，我们推荐以下两种方法：
立即学习“前端免费学习笔记（深入）”；
方法一：利用appendChild()方法
dom_exeStartPrev.parentNode.insertBefore(div, dom_exeStartPrev.nextSibling);
appendChild()方法将div元素作为子节点添加到dom_exeStartPrev的父节点中，并将其插入到dom_exeStartPrev之后。
方法二：运用insertAdjacentHTML()方法
dom_exeStartPrev.insertAdjacentHTML('afterend', div.outerHTML);
insertAdjacentHTML()方法将div元素的outerHTML作为HTML字符串插入到dom_exeStartPrev元素之后。 注意这里使用outerHTML而不是innerHTML，以确保包含div元素本身。
这两种方法都能有效地将div元素及其内容添加到dom_exeStartPrev元素之后，避免了outerHTML替换元素的缺陷，从而实现预期的DOM操作效果。 选择哪种方法取决于具体的需求和代码风格。
