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

最新推荐文章于 2023-06-14 11:46:35 发布
最新推荐文章于 2023-06-14 11:46:35 发布
阅读量3.7k 收藏 5
点赞数 1
分类专栏： 常见问题 HTML 日常开发 文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24724109/article/details/103689938
版权

使用 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
最低0.47元/天 解锁文章
月半叫做胖
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS克隆
weixin_59519449的博客
08-04 238
D元素的克隆 p.cloneNode(true) true表示深度克隆，会将标签内部的所有内容一起复制 false表示浅克隆 只会复制标签，不会复制里面的内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"> <p id="
JavaScript：使用键盘/鼠标来移动标签
SE_LIN的博客
02-28 386
js标签用鼠标/键盘移动
鼠标拖动表格中的数据，表格美化（系列二）
黑色头发
08-13 216
效果图：表格上边的文字可以通过鼠标的拖拽到下边的表格内 代码： [code="html"] WebForm2 /*--------全局变量-----------*/ var x0...
Java标签移动_当R闪亮从一个标签移动到另一个标签时，标签页面如何重置为初始状态？...
weixin_34520664的博客
02-25 149
在R闪亮中从一个标签移动到另一个标签时，标签的页面如何重置为初始状态？这是考虑到有两个标签A abs B.当点击A并在A中执行某些操作时，例如按钮点击并填写表格然后移动到选项卡B并再次移动到选项卡A.然后选项卡A应重置为其初始状态 . 当从一个选项卡移动到另一个选项卡而不单击R中的按钮时，可以自动执行此操作吗？我的代码是ui.RshinyUI(navbarMenu(“IDnavbarmenu”，t...
外部js控制HTML中div移动效果,JavaScript利用键盘码控制div移动
weixin_35813719的博客
06-03 150
前言在生活中肯定有玩过贪吃蛇的游戏，那么要怎么样用键盘码来实现div的移动呢？下面就分享一个Demo。利用键盘码来控制div移动源码#box {height: 100px;width: 100px;background-color: red;position: absolute;}var oBox = document.getElementById("box")var x = 0var y = 0...
微信小程序推荐-一个颜值比较高的商城demo
03-15
这里首先定义一个view（类比html中的div），给它加上一个view叫做view-triangle，主要是用来给它自身定义背景，宽高，并且需要加上相对定位，因为它里面的三角符号需要在它的基础上进行绝对定位；   在这个view ...
第一个Android应用扫描宝欲挑战传统扫描枪
03-04
本来一直在做.net平台的开发，但是项目的需要要做一个移动终端的版本，但是这个移动终端版本并不是用原生开发的，而是基于PhoneGap框架，开发人员能够使用熟悉的HTML，CSS和JavaScript构建跨平台的移动本地应用，也...
一年级三班随笔：在反思中，引领孩子向前进.doc
02-23
一年级三班随笔：在反思中，引领孩子向前进.doc
nices:一个简单的新闻应用
06-10
NiceS一个简单的新闻app说明NiceS只是作者无聊的时候，为了不荒废时间，就在eclipse上随笔画画做出的小东西。功能，就是看看文章，收藏文章而已，呵呵，真的好简单，嗯，所以代码也挺简单的。用到的东西，什么...
Jquery移动html到另一个标签下
abyiy9580的博客
11-14 418
需求再现 <div id="div1"> <p>这是一段测试文本001</p> </div> <div id="div2"> <p>这是一段测试文本002</p> <div id="div2_0"> ...
JS修改标签中的文本且不影响其中标签
weixin_34183910的博客
08-31 614
/********************************************************************* * JS修改标签中的文本且不影响其中标签 * 说明： * 需要修改&lt;a&gt;标签中的显示文本内容，但&lt;a&gt;标签中又有标签。 * * ...
向某标签内追加新标签
娓娓道来
11-22 1030
var btn2 = window.parent.document.getElementById("nvaspan2"); $(btn2).append('<label id="nvaspan222" class="label_dg">/</label><a id="nvaspan22" class="aColor" name="" href=""&g...
js实现标签下划线平移
weixin_33795093的博客
06-02 682
一.使用js实现导航行栏，点击时，下划线会跟着鼠标的点击移动。html代码如下：<header> <divid="nav1"> <divid="id1"class="item">1</div> <divid="id2"class="item">2</div> ...
使用JS将指定下标的元素移动到某个位置，且获取到有变化的元素及下标的变化
最新发布
LOUISLIAOXH的专栏
06-14 405
【代码】使用JS将指定下标的元素移动到某个位置，且获取到有变化的元素及下标的变化。
js 两个相等的数组，如何做到修改其中一个时，另一个不随着变化
qq_43014842的博客
04-12 783
var arrA = [1, 2, 3]; var arrB = arrA; 问题： 直接赋值时，若改变arrA，则arrB也会随着变化；若改变arrB，则arrA也会随着变化。 原因： js中array是引用类型，也就是arrA和arrB的原数据存储地址是一样的，arrA和arrB都是对原数据的引用，所以修改其中一个，另一个也会改变。这就好像是现在有一个房间，两扇门，AB两人分别从不同的门进去所看到的的房间是一样的，此时A拿走一个苹果，B会看到房间里少了一个苹果；B从外面带了一瓶饮料回到房间，A也会看到这
怎么让一个div浮动到另一个div上
m0_45293340的博客
07-05 589
怎么让一个div浮动到另一个div上
JS JQuery中实现点击当前标签改变样式以及同时改变后几个标签的样式
weianl的博客
08-19 4798
我在移动端的开发中遇到了如下粉红色选择第一个时间点时，后两个时间点的样式也改变了 JS（注意这些代码是放到jQuery方法里的 ） 首先我把列表的数据放到了js数组 var afternoonData = ["13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30"] ...
JavaScript标签选取
hizyk的博客
11-24 2473
声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！ JS获取DOM元素的方法 通过ID获取（getElementById） 通过name属性（getElementsByName） 通过标签名（getElementsByTagName） 通过类名（getElementsByClassName） 获取html的方法（document.documentElement） 获取body的方法（documen
JS实现列表数据左右、上下移动功能
简约人生的博客
04-13 9628
本文主要介绍JS实现将左边下拉框列表选中项数据添加到右边的功能，支持多选移动。文章中提供了两种方案，一种是将左侧选中项复制到右边，左侧数据不发生变化，同时阻止数据重复添加到右侧；另一种是数据添加到右边的同时从左边移除，从右边移除的同时向左边追加，并对右侧列表数据实现了上下移动功能。 一、效果图 进行左右移动时，选定一项或多项点击添加或移除(按住shift或ctrl可以多选)，上下移动不支持多选...
写一个关于书城的网页首页网页代码
06-08
很抱歉，作为一名 AI，我无法生成实际可用的网页代码。但是，你可以通过以下步骤自己创建一个简单的书城网页首页： 1. 编写 HTML 结构，包括头部、导航栏、轮播图、分类展示、推荐书籍等模块。 ``` <!DOCTYPE html> <html> <head> <title>书城首页</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>书城</h1> <nav> <a href="#">首页</a> <a href="#">分类</a> <a href="#">购物车</a> <a href="#">我的</a> </nav> </header> <main> <div class="carousel"> <img src="carousel1.jpg" alt="轮播图1"> <img src="carousel2.jpg" alt="轮播图2"> <img src="carousel3.jpg" alt="轮播图3"> </div> <div class="categories"> <h2>分类</h2> <a href="#">小说</a> <a href="#">散文随笔</a> <a href="#">传记</a> <a href="#">哲学</a> <a href="#">历史</a> </div> <div class="recommendations"> <h2>推荐</h2> <div class="book"> <img src="book1.jpg" alt="书籍1"> <h3>书籍1</h3> <p>简介1</p> <p>价格1</p> </div> <div class="book"> <img src="book2.jpg" alt="书籍2"> <h3>书籍2</h3> <p>简介2</p> <p>价格2</p> </div> <div class="book"> <img src="book3.jpg" alt="书籍3"> <h3>书籍3</h3> <p>简介3</p> <p>价格3</p> </div> </div> </main> <footer> <p>© 2021 书城</p> </footer> </body> </html> ``` 2. 编写 CSS 样式，美化页面，使其更加吸引人。 ``` body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; display: flex; justify-content: space-between; padding: 10px 20px; } nav { display: flex; } nav a { color: #fff; margin-left: 20px; text-decoration: none; } nav a:hover { text-decoration: underline; } main { padding: 20px; } .carousel { display: flex; justify-content: space-between; overflow: hidden; } .carousel img { width: 100%; } .categories { margin-top: 20px; } .categories h2 { font-size: 20px; } .categories a { display: block; margin-top: 10px; text-decoration: none; } .recommendations { margin-top: 20px; } .recommendations h2 { font-size: 20px; } .book { background-color: #eee; border-radius: 5px; display: inline-block; margin-right: 20px; padding: 10px; width: 200px; } .book img { width: 100%; } .book h3 { font-size: 16px; margin-top: 10px; } .book p { margin: 0; } footer { background-color: #333; color: #fff; padding: 10px 20px; text-align: center; } ``` 3. 在服务器上部署网页，使用户能够访问到。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值