DOM 创建和操作元素 ​

• createElement(): 创建新的元素节点。
• appendChild(): 将一个节点添加为另一个节点的子节点。
• removeChild(): 删除指定的子节点。
• setAttribute(): 设置元素的属性值。
• getAttribute(): 获取元素的属性值。

创建元素 ​

使用 createElement 方法创建新元素：

const newElement = document.createElement('tagName')

其中 tagName 是你想要创建的元素的标签名，例如 div、p、span 等。

设置元素属性和内容 ​

设置元素的属性：使用 setAttribute 方法：

element.setAttribute('attributeName', 'attributeValue')

设置元素的文本内容：使用 textContent 属性或 innerText 属性：

element.textContent = 'Text content'
// 或者
element.innerText = 'Text content'

设置元素的 HTML 内容：使用 innerHTML 属性：

element.innerHTML = '<p>HTML content</p>'

操作元素的父子关系 ​

将新元素添加到父元素中：使用 appendChild 方法：

parentElement.appendChild(newElement)

这将把 newElement 添加为 parentElement 的子元素。

将元素插入到已有元素之前：使用 insertBefore 方法：

parentElement.insertBefore(newElement, existingElement)

这将把 newElement 插入到 existingElement 之前，作为它的兄弟元素。

从父元素中移除子元素：使用 removeChild 方法：

parentElement.removeChild(childElement)

这将从 parentElement 中移除 childElement。