js添加节点

Document.createElement()

在添加节点之前当然需要先有一个节点。我们使用该方法用以创建节点

• 示例

let li = document.createElement(`li`);
// let 自定义名称 = document.createElement(`新业态创建元素类型的字符串`);

Node.appendChild

该方法用于向指定父节点的子节点末尾处添加指定的节点

• 示例

let ul = document.getElementsByTagName(`ul`);
let li = document.createElement(`li`);
ul.appendChild(li);

Node.insertBefore()

Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点。如果给定的子节点是对文档中现有节点的引用，insertBefore() 会将其从当前位置移动到新位置（在将节点附加到其他节点之前，不需要从其父节点删除该节点）。

• 语法

let insertedNode = parentNode.insertBefore(newNode, referenceNode);

• insertedNode 被插入节点(newNode)
• parentNode 新插入节点的父节点
• newNode 用于插入的节点
• referenceNode newNode 将要插在这个节点之前 如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾 。

innerHTML()

该方法除了可以添加文本内容以外，还能添加以字符串形式存储的HTML代码。

• 示例

let htmlStr = `<a href="https://developer.mozilla.org/zh-CN/plus">MDN</a>`;
let div = document.getElementsByTagName(`div`);
div,innerHTML = htmlStr;

element.insertAdjacentHTML

insertAdjacentHTML() 方法将指定的文本解析为 Element元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。

• 语法

element.insertAdjacentHTML(position, text);

• position 一个 DOMString，表示插入内容相对于元素的位置，并且必须是以下字符串之一：
  • 'beforebegin'：元素自身的前面。
  • 'afterbegin'：插入元素内部的第一个子节点之前。
  • 'beforeend'：插入元素内部的最后一个子节点之后。
  • 'afterend'：元素自身的后面。

• text 是要被解析为HTML或XML元素，并插入到DOM树中的 DOMString

这个方法插入元素时使用的内容跟 innerHTML() 类似，但功能更加强大。