html dom append

在 HTML DOM 中，可以使用 `appendChild()` 方法将一个节点（node）添加到另一个节点的末尾。具体使用方法如下：

// 创建一个新节点
var newNode = document.createElement("p");
var textNode = document.createTextNode("这是一个新段落。");
newNode.appendChild(textNode);

// 获取目标节点
var targetNode = document.getElementById("myList");

// 将新节点添加到目标节点的末尾
targetNode.appendChild(newNode);

上面的代码会创建一个新的段落节点，并将其添加到 id 为 `myList` 的元素的末尾。

注意，如果要将节点添加到另一个节点的开头，可以使用 `insertBefore()` 方法。例如：

// 将新节点添加到目标节点的开头
targetNode.insertBefore(newNode, targetNode.firstChild);

相关问题

append方法基于dom的xss修复

在JavaScript中，向DOM中插入HTML代码的方法可能会导致XSS攻击。因此，我们需要确保将用户提供的内容经过适当的转义和过滤，以避免攻击。在使用append方法向DOM中插入HTML代码时，可以使用以下方法进行XSS修复：

1. 使用innerHTML代替append方法

使用innerHTML向DOM中插入HTML代码时，浏览器会自动进行XSS过滤，这可以有效地防止XSS攻击。因此，在可能的情况下，建议使用innerHTML代替append方法。

2. 转义用户提供的内容

在使用append方法时，需要确保将用户提供的内容进行适当的转义，以防止用户输入的恶意代码被执行。可以使用一些JavaScript库，如DOMPurify或He等，来转义用户提供的内容。这些库使用白名单机制，只允许安全的HTML标签和属性，从而避免了XSS攻击。

3. 过滤用户提供的内容

除了转义用户提供的内容之外，还可以使用一些过滤器来确保用户提供的内容符合预期。例如，可以使用正则表达式或其他方法来检查输入的内容是否包含不安全的代码，例如JavaScript代码或CSS代码。如果发现不安全的代码，则应该禁止向DOM中添加该内容。

总之，通过适当的转义和过滤，我们可以确保向DOM中添加HTML代码时避免XSS攻击。

vue append

在Vue.js中，可以使用`v-if`和`v-for`指令来动态地向DOM元素添加内容。然而，如果你想在已有的DOM元素后面追加新的内容，可以使用Vue的内置方法`$el.appendChild()`。

下面是一个示例，展示了如何在Vue实例的DOM元素后面追加一个新的元素：

<template>
  <div ref="container">
    <!-- 已有的内容 -->
    <p>已有的内容</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取DOM元素的引用
    const container = this.$refs.container;

    // 创建新的DOM元素
    const newElement = document.createElement('p');
    newElement.textContent = '新的内容';

    // 将新元素追加到已有内容后面
    container.appendChild(newElement);
  }
};
</script>

在上述示例中，我们使用了`ref`属性来获取到Vue实例中的`<div>`元素，并将其赋值给`container`变量。然后，我们使用`document.createElement()`方法创建一个新的`<p>`元素，并设置其文本内容为"新的内容"。最后，我们使用`appendChild()`方法将新元素追加到容器元素的末尾。

请注意，`mounted()`生命周期钩子函数用于确保在Vue实例挂载后执行DOM操作。