日常随笔：JS实现将一个元素从一个标签中移动到另一个标签中的简单方法

最新推荐文章于 2023-06-14 11:46:35 发布

原创最新推荐文章于 2023-06-14 11:46:35 发布 · 3.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

日常开发同时被 3 个专栏收录

23 篇文章

订阅专栏

常见问题

22 篇文章

订阅专栏

HTML

16 篇文章

订阅专栏

本文介绍了如何使用JavaScript的append方法将一个元素从一个标签移动到另一个标签中，详细解析了问题描述、实验验证过程及实验结果，揭示了append方法在元素迁移中的工作原理。

使用 append 方法完成页面内元素的迁移

问题描述

要将一个元素target从一个标签(div1)中移动到另外一个标签(div2)中，应该怎么做呢

一般做法：先将target从div1中保存并从div1中将target删除，然后在div2中添加该元素

特殊做法: 今天发现直接append该target元素!!!

实验验证

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .box {
        width: 50px;
        height: 50px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        1
        <div class="box"></div>
      </li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <button onclick="changeBox()">Change Pos</button>
      <script>
        const lis = document.querySelectorAll('li');
        const box = document.querySelector('.box');

        const changeBox = () => {
          const pos = Math.floor(Math.random() * 5);
          console.log(pos);
          lis[pos].append(box);
        };
      </script>
    </ul>
  </body>
</html>