Vue中插入新节点的api

在Vue中，可以使用以下API来插入新节点：

- `vm.$el.appendChild(node)`：将新节点插入到组件的根节点中。

- `parent.insertBefore(newNode, existingNode)`：将新节点插入到已有节点之前。

例如，如果想要在组件的根节点中插入一个新的`<div>`节点，可以使用以下代码：

mounted() {
  const newDiv = document.createElement('div')
  newDiv.innerText = 'New Div'
  this.$el.appendChild(newDiv)
}

如果想要在已有节点之前插入一个新的`<div>`节点，可以使用以下代码：

mounted() {
  const existingDiv = document.querySelector('.existing-div')
  const newDiv = document.createElement('div')
  newDiv.innerText = 'New Div'
  existingDiv.parentNode.insertBefore(newDiv, existingDiv)
}

注意，如果在Vue中使用了template，那么组件的根节点可能不是`<div>`，而是一个包含所有子元素的容器。在这种情况下，可以使用`this.$el.children[0]`来获取根节点。

相关问题

vue不用v-html插入div还有什么方法

除了使用`v-html`指令之外，Vue.js还提供了其他几种方法来动态插入div或其他元素：

1. 使用Vue.js的渲染函数(render function)来手动创建元素并插入到DOM中。这种方法需要了解Vue.js的渲染函数的API，比较复杂，但是可以更加灵活地控制生成的元素。下面是一个简单的示例：

<template>
  <div ref="container"></div>
</template>

<script>
export default {
  mounted() {
    const div = this.$createElement('div', { class: 'my-div' }, '这是动态插入的div')
    this.$refs.container.appendChild(div)
  }
}
</script>

在上面的示例中，`$createElement`方法用于创建一个div元素，然后使用`appendChild`方法将其插入到`<div ref="container">`元素的子节点中。

2. 使用Vue.js的组件系统，将动态生成的元素封装成一个组件，然后在需要插入的地方使用该组件。这种方法需要先定义一个组件，稍微有些复杂，但是可以更好地复用动态生成的元素。下面是一个示例：

<template>
  <div>
    <my-dynamic-div></my-dynamic-div>
  </div>
</template>

<script>
export default {
  components: {
    'my-dynamic-div': {
      template: '<div class="my-div">这是动态插入的div</div>'
    }
  }
}
</script>

在上面的示例中，定义了一个名为`my-dynamic-div`的组件，然后在模板中使用该组件即可动态插入这个div元素。