js原生把第一个孩子dom移动到最后一个

可以使用以下代码：

const parent = document.getElementById('parent'); //获取父元素
const firstChild = parent.firstElementChild; //获取第一个子元素
const lastChild = parent.lastElementChild; //获取最后一个子元素
parent.removeChild(firstChild); //从父元素中移除第一个子元素
parent.insertBefore(firstChild, lastChild.nextSibling); //将移除的子元素插入到最后一个子元素之后

注意，这里使用了`firstElementChild`和`lastElementChild`方法来获取第一个子元素和最后一个子元素，而不是`firstChild`和`lastChild`属性。这是因为前者只会返回元素节点，而后者可能会返回文本节点等其他节点类型。在这里，我们只想要元素节点。

相关问题

vue 将dom移动到另一个dom中

在 Vue 中，要将一个 DOM 元素移动到另一个 DOM 元素中，可以使用 $refs 属性和原生 DOM API 中的 appendChild() 和 removeChild() 方法。

首先，给需要移动的 DOM 元素添加一个 ref，例如：

<div ref="myElem">Hello World</div>

然后，在 Vue 的 methods 中，可以使用 $refs 属性获取到这个 DOM 元素的引用，并使用原生 DOM API 中的 appendChild() 和 removeChild() 方法将它移动到另一个 DOM 元素中。例如：

export default {
  methods: {
    moveElem() {
      const myElem = this.$refs.myElem;
      const targetElem = document.querySelector('#targetElem');
      targetElem.appendChild(myElem);
    }
  }
}

这样，就将 ref 为 myElem 的 DOM 元素移动到了 id 为 targetElem 的 DOM 元素中。如果需要将它移回原来的位置，可以使用 removeChild() 方法将它从目标元素中移除，再使用 appendChild() 方法将它移回原来的位置。

原生js写一个可随便移动的十字光标

好的，下面是代码实现：

首先，我们需要在HTML中创建一个<div>元素，用于表示十字光标，代码如下：

<div id="cursor"></div>

然后，在CSS中，我们需要对这个元素进行一些样式设置，使其看起来像一个十字光标，代码如下：

#cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid red;
  border-radius: 50%;
  pointer-events: none;
}

接下来，我们需要编写JavaScript代码，实现使这个十字光标可随意移动的功能。代码如下：

var cursor = document.getElementById("cursor");

document.addEventListener("mousemove", function(event) {
  var x = event.clientX;
  var y = event.clientY;
  
  cursor.style.left = x + "px";
  cursor.style.top = y + "px";
});

以上代码中，我们通过监听`mousemove`事件，获取鼠标的坐标，并将十字光标的位置设置为鼠标的位置。

好了，现在你可以试着将这段代码复制到你的HTML文件中，看看效果如何吧！