将一个ul下的li转移到另外一个ul里面 【appendTo】

最新推荐文章于 2022-03-15 12:56:30 发布
最新推荐文章于 2022-03-15 12:56:30 发布
阅读量3.4k 收藏
点赞数
分类专栏： JQuery 文章标签： appendTo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fanbin168/article/details/38260829
版权

<1>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>将一个ul下的li转移到另外一个ul里面</title>
    <script src="script/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //创建一个节点
            var li = $("<li>中国队</li><li>美国队</li><li>巴西队</li><li>德国队</li>")
            //给这个节点添加到#ul1里面
            $("#ul1").append(li)
            $("ul li").mouseover(function () {
                $(this).css("background", "red").siblings().css("background", "White").click(function () {

                    //$(this).appendTo($("#ul2"))的意思是将当前的li添加到#ul2里面
                    $(this).appendTo($("#ul2")).css("background","white")
                })
            })
        })
    </script>
</head>
<body>
<ul id="ul1" style=" float:left"></ul>
<ul id="ul2"style=" float:right"></ul>
</body>
</html>

             

无盐海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
把一个ul的li插入到另一个ul
海绵啵啵
05-20 927
文章来自 codego.net window.onload = function(){ var ul2 = document.getElementById('ul2'); var oli = document.getElementsByTagName('li'); for(var i=0;i&lt;oli.length;i++){ ul2.appendChild(oli[i]); ...
JQuery中两个ul标签的li互相移动实现方法
weixin_30790841的博客
10-08 86
这篇文章主要介绍了JQuery中两个ul标签的li互相移动实现方法,可实现ul标签中li标签内容相互替换的技巧,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下 本文实例讲述了JQuery中两个ul标签的li互相移动实现方法。分享给大家供大家参考。具体实现方法如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio...
html中ul怎么整体移动,JQuery中两个ul标签的li互相移动实现方法
weixin_39574065的博客
06-03 629
/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">两个ul标签中的li互相移动ul{list-style-type:none;float:left;margin-right:30px;background-color:Green;width:100px;height:100px;padding:0px;}li{ma...
JS中一个ul中li点击事件，改变另一个ul中的li
weixin_42943920的博客
01-15 372
jsp ul 下的li 标签循环滚动
04-16
`scrollList`函数将第一个`li`元素移动到`ul`的末尾，模拟滚动效果。最后，通过`setTimeout`设置延迟和循环执行，实现自动滚动。 4. **动画效果**：如果希望滚动过程平滑，可以使用jQuery的`animate`方法，添加过渡...
jquery实现在一个页面2个独立的滚动新闻框
04-21
通常，这会包含一个容器元素（如`div`），里面装有多个新闻条目（可以是`li`元素）。例如： ```html <ul> <li>新闻1</li> <li>新闻2</li> ... </ul> <ul> <li>新闻A</li> <li>新闻B</li> ... </ul> ...
节点的插入之append()和appendTo()的用法介绍
09-04
这里，`prepend()`方法将`li2`添加到`<ul>`的开头，`after()`方法则在第五个`<li>`元素（因为数组索引从0开始，所以`eq(4)`对应第五个元素）之后插入了`li3`。 总结来说，`append()`和`appendTo()`主要用来在DOM的...
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
10-26
本文将详细探讨JS和JSP在处理列表第一个元素时的区别。 首先，JavaScript是一种客户端脚本语言，它运行在用户的浏览器上，负责交互、动态效果和数据处理。在JS中，处理列表的第一个值通常涉及到数组操作。例如，给...
子组件向父组件传递数据_如何将元素引用向下传递到角度的组件树中
weixin_26722099的博客
10-12 178
子组件向父组件传递数据I recently had a requirement to make sure a PrimeNG Dropdown panel inside a modal with scrolling content was not constrained within the modal, but rather could be seen and interacted with w...
javaScript学习-动态为ul添加li
yinyan1314的博客
09-04 1879
实现思路：ul对象.append(li对象)；实现： HTML代码： 选择城市 关闭 省/直辖市: CSS代码：
2021-11-16 一天一个例子 li拖拽
qq_45204129的博客
11-16 943
实现li标签的拖拽功能，在html5之后，链接、文本和图像默认是可以拖动的，其他的控件想要实现拖拽，在定义的时候将 draggable 设置为true。 在进行拖拽的时候，使用具体的一些方法： for(var i=0;i<aA.length;i++){ aA[i].ondragstart = function(ev){ //拖拽前触发 this.style.background = 'yellow'; ev.dataTransfer.setData('a','hell
可拖动元素拖动到另外一个元素位置的时候，互相交换位置
weixin_30922589的博客
09-03 543
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...
jQuery 节点操作（创建 插入 删除 复制 替换 包裹）
weixin_30849591的博客
04-25 154
一，创建元素节点： 　　第1个步骤可以使用jQuery的工厂函数$()来完成，格式如下： 　　　　$(html); 　　　　$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。 var $li_1 = $("<li></li>"); // 创建第一个<li>元素 var $li_...
节点操作之复制节点
m0_62962469的博客
03-15 1477
node.cloneNode() 该方法返回调用该方法节点的一个副本，也称为克隆节点/拷贝节点。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> li { list-style: none; } </style> </head&
.html实现节点的复制,DOM操作——怎样添加、移除、移动、复制、创建和查找节点。...
weixin_39609953的博客
06-19 768
(1)创建新节点createDocumentFragment()//创建一个DOM片段createElement_x()//创建一个具体的元素createTextNode()//创建一个文本节点(2)添加、移除、替换、插入appendChild()removeChild()replaceChild()insertBefore()(3)查找getElementsByTagName()//通过...
jquery基础
lzy295481710的专栏
10-12 347
1.概述：jquery是在javascript基础上封装插件，简化对浏览器元素对象的操作。 2. $(document).ready(function(){//页面加载完之后执行的方法，("#cbutton").click(function(){});监听注册的函数必须写在ready里面才会生效 alert("hello word!") }); 3.jquery对象和DOM对象互相转换
你能用jquery写一个首页网站嘛
最新发布
06-10
当然可以。jQuery 是一个非常流行的 JavaScript 库，可以用来简化 HTML 文档的遍历和操作、事件处理、动画效果等。 以下是一个简单的示例，演示如何使用 jQuery 创建一个基本的首页网站： HTML 代码： ```html <!DOCTYPE html> <html> <head> <title>首页</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="index.js"></script> </head> <body> <header> <h1>欢迎来到我的网站</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我</a></li> <li><a href="#">联系我</a></li> </ul> </nav> </header> <main> <section> <h2>最新文章</h2> <ul id="article-list"> <li><a href="#">文章标题1</a></li> <li><a href="#">文章标题2</a></li> <li><a href="#">文章标题3</a></li> </ul> </section> <section> <h2>热门标签</h2> <ul id="tag-list"> <li><a href="#">标签1</a></li> <li><a href="#">标签2</a></li> <li><a href="#">标签3</a></li> </ul> </section> </main> <footer> <p>版权所有 © 2021</p> </footer> </body> </html> ``` JavaScript 代码（index.js）： ```javascript $(function() { // 设置导航栏当前选中项的样式 $('nav ul li a').click(function() { $('nav ul li a').removeClass('active'); $(this).addClass('active'); }); // 加载最新文章列表 $.get('http://example.com/api/articles/latest', function(data) { var $list = $('#article-list'); $list.empty(); $.each(data, function(i, item) { var $li = $('<li>').appendTo($list); var $a = $('<a>').attr('href', item.url).text(item.title).appendTo($li); }); }); // 加载热门标签列表 $.get('http://example.com/api/tags/popular', function(data) { var $list = $('#tag-list'); $list.empty(); $.each(data, function(i, item) { var $li = $('<li>').appendTo($list); var $a = $('<a>').attr('href', item.url).text(item.name).appendTo($li); }); }); }); ``` 这段代码使用 jQuery 的一些常用方法，如 `click`、`get`、`each`、`appendTo` 等，来实现一些基本的功能，包括导航栏样式、最新文章列表、热门标签列表等。通过 AJAX 请求获取数据，然后使用 jQuery 动态生成 HTML 元素，最终呈现在页面上。 当然，这只是一个简单的示例，实际上一个完整的首页网站需要更多的功能和复杂度，但是借助 jQuery 这个强大的工具库，我们可以更加方便地实现这些功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值