在前端开发中，我们经常需要动态地创建和插入 DOM 元素。使用内置的 DOM 方法或原型可以很方便地从 HTML 字符串创建新的 DOM 元素，这样我们就可以避免手动编写大量的 HTML 代码。
内置DOM方法
createElement() 方法
createElement() 方法是创建新 DOM 元素最基本的方法之一。它接收一个参数，即要创建的元素的标签名。例如，要创建一个 <div> 元素，可以使用以下代码：
const div = document.createElement('div');createTextNode() 方法
createTextNode() 方法用于创建文本节点。它接收一个参数，即要创建的文本内容。例如，要创建一个包含 "Hello World" 文本的文本节点，可以使用以下代码：
const textNode = document.createTextNode('Hello World');innerHTML 属性
innerHTML 属性可以让我们将一个 HTML 字符串转换为 DOM 元素。例如，要创建一个包含 <h1>Hello World</h1> 的 div 元素，可以使用以下代码：
const htmlString = '<h1>Hello World</h1>';
const div = document.createElement('div');
div.innerHTML = htmlString;原型方法
insertAdjacentHTML() 方法
insertAdjacentHTML() 方法可以让我们在指定的位置插入 HTML 字符串。它接收两个参数，第一个参数表示插入的位置，第二个参数表示要插入的 HTML 字符串。例如，要在 <body> 元素的末尾插入一个包含 "Hello World" 的 div 元素，可以使用以下代码：
document.body.insertAdjacentHTML('beforeend', '<div>Hello World</div>');示例代码
下面是一个包含上述方法的完整示例：
const div1 = document.createElement('div');
const textNode = document.createTextNode('Hello World');
const div2 = document.createElement('div');
div1.appendChild(textNode);
div2.innerHTML = '<h1>Hello World</h1>';
document.body.insertAdjacentHTML('beforeend', '<div>Hello World</div>');通过以上代码，我们创建了三个不同的 div 元素，并将它们添加到了页面中。
总结
使用内置 DOM 方法或原型可以很方便地从 HTML 字符串创建新的 DOM 元素。createElement()、createTextNode() 和 innerHTML 属性是最基本的创建 DOM 元素的方法，而 insertAdjacentHTML() 方法则可以让我们更快速地插入 HTML 字符串。在实际开发中，我们可以根据具体的需求来选择适合自己的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8367