获取dom元素，appendChild

可以使用JavaScript的DOM API来实现获取DOM元素，然后向其添加子元素，具体步骤如下：

1. 获取父元素，可以使用 `document.getElementById()` 或 `document.querySelector()` 方法来获取。

2. 创建要添加的子元素，可以使用 `document.createElement()` 方法来创建。

3. 将子元素添加到父元素中，可以使用 `parentNode.appendChild()` 方法将子元素添加到父元素的末尾。

例如，以下代码将在id为"parent"的div元素中添加一个新的p元素：

// 获取父元素
const parent = document.getElementById('parent');

// 创建要添加的子元素
const newElement = document.createElement('p');
newElement.textContent = '这是新的子元素';

// 将子元素添加到父元素中
parent.appendChild(newElement);

相关问题

vue获取dom元素并追加元素

在Vue中，可以使用`ref`指令来获取DOM元素，并使用Vue的响应式系统来动态追加元素。

首先，在需要获取或追加元素的地方，使用`ref`指令给DOM元素添加一个引用名字，例如：

<template>
  <div>
    <div ref="myElement">这是一个DOM元素</div>
    <button @click="appendElement">追加元素</button>
  </div>
</template>

然后，在Vue实例中的`methods`选项中，通过`this.$refs`来访问DOM元素的引用，可以使用常规的DOM操作方法来追加元素。例如：

<script>
export default {
  methods: {
    appendElement() {
      const newElement = document.createElement('div');
      newElement.innerText = '新的元素';
      
      // 获取之前定义的DOM元素引用
      const myElement = this.$refs.myElement;
      
      // 追加新的元素到DOM元素中
      myElement.appendChild(newElement);
    }
  }
}
</script>

这样，每次点击按钮时，就会在`myElement`这个DOM元素中追加一个新的元素。注意，Vue会自动管理DOM更新和渲染，所以不需要手动处理视图更新。

获取dom元素，然后插入子元素

在 Vue 中获取 DOM 元素可以使用 `$refs` ，它是一个对象，可以用来存储对组件内部子元素或 DOM 元素的引用。使用 `$refs` 可以方便地获取到 DOM 元素，然后对其进行操作。

例如，在 Vue 模板中定义一个 `div` 元素，并给它添加一个 `ref` 属性：

<div ref="myDiv"></div>

然后在 Vue 实例中，可以通过 `this.$refs` 对象来访问这个元素：

mounted() {
  const myDiv = this.$refs.myDiv;
  myDiv.appendChild(document.createElement('span'));
}

在 `mounted` 钩子函数中，使用 `this.$refs.myDiv` 获取到 DOM 元素，然后通过 `appendChild` 方法在它里面插入一个 `span` 元素。

需要注意的是，使用 `$refs` 来获取 DOM 元素并直接修改它可能会导致一些意外的问题，因为这样做可能违反了 Vue 的单向数据流原则，可能会影响 Vue 组件的响应性能。因此，建议尽量使用 Vue 的数据绑定机制来操作 DOM 元素，而不是直接操作 DOM。