使用 .createElement() 和 append() 与 .innerHTML 的优缺点

创建HTML元素是Web开发中必不可少的一部分，常见的创建HTML元素的方法是使用 .createElement() 和 append() 或者使用 .innerHTML。

.createElement() 和 append()

.createElement() 方法可以通过 JS 动态地创建 HTML 元素。

const newElement = document.createElement(tagName);

其中，tagName 是必需的参数，它指定了创建的元素的标签名。例如，要创建一个新的 <div> 元素，可以这样写：

const newDiv = document.createElement('div');

有了新的元素，就可以使用 append() 将其添加到指定的 DOM 节点上。

parentNode.append(newElement);

其中，parentNode 是指要将新元素添加到其内部的父元素。例如，将 newDiv 添加到 body 元素内部：

const body = document.querySelector('body');
body.append(newDiv);

这种方法的优点是，可以精确地控制要添加的元素，可以设置其属性和样式，也可以将元素添加到任意位置的 DOM 树上。但是，由于需要手动设置每个属性和样式，这种方法比 .innerHTML 更加繁琐。

.innerHTML

.innerHTML 属性是 DOM 元素的属性，可以用来获取或设置其内部 HTML 内容。

element.innerHTML = newHTML;

其中，element 是要设置内部内容的元素，newHTML 是要设置的 HTML 内容。例如，要将 body 元素的内部内容替换为 Hello World!，可以这样写：

document.querySelector('body').innerHTML = 'Hello World!';

这种方法的优点是，可以快速地创建复杂的 HTML 结构，并将其添加到 DOM 树上。但是，由于在设置 innerHTML 时，浏览器会将其解析为 DOM 元素，这可能会导致潜在的安全问题，因为可以将恶意脚本注入页面。同时，由于设置 innerHTML 会覆盖原来的内容，因此不能将元素添加到指定的位置上。

总结一下，使用 .createElement() 和 append() 可以精细地控制要创建和添加的元素，但是比较繁琐。而使用 .innerHTML 可以快速创建复杂的 HTML 结构，但是不够安全，并且不能将元素添加到指定位置上。

因此，在开发中，应该根据具体的情况选择合适的方法，保证代码的安全性和可读性。