`

把一个ul的li插入到另一个ul

    博客分类:
  • html
ul 
阅读更多

文章来自 codego.net

window.onload = function(){
var ul2 = document.getElementById('ul2');
var oli = document.getElementsByTagName('li');
for(var i=0;i<oli.length;i++){
ul2.appendChild(oli[i]);
}
}
< h3>讲Id为ul1的内容插入到ul2里面</h3>
< ul id="ul1">
< li>1</li>
< li>2</li>
< li>3</li>
< li>4</li>
< li>5</li>
< li>6</li>
< /ul>
< ul id="ul2">
< /ul>

 

        把ul1内容插入到ul2,这个过程不是复制,而是把ul1中的li全部抽到ul2中

        这代码很有用,特别是在json数据没那么容易操作(例如有多重循环),然后ajax请求回来一大段data,data里面含有多个li,但是无法直接放在ul1的后面,因为ul只支持appendChild(li[0]),这个方法只拼接一个li;最终还是让返回的结果先隐藏在一个ul中,然后再执行上面的操作,问题就很容易解决了。

分享到:
评论

相关推荐

    ul li 模拟省市区下拉框

    在网页开发中,为了提供更好的用户体验,我们常常需要模拟出具有层级关系的...以上就是“ul li 模拟省市区下拉框”的相关知识点,它涉及到前端UI设计、数据处理、事件驱动编程等多个方面,是网页开发中的一个重要技能。

    jquery 选中一个li在第四个li后插入新的li.docx

    首先,让我们考虑标题中的场景:“jQuery 选中一个li在第四个li后插入新的li”。为了实现这一功能,我们需要以下几个步骤: 1. **选择目标`&lt;li&gt;`元素**:使用`$("#yourLiId")`或`$("li.yourClass")`来选择需要插入...

    li标签前面添加图标

    另一种方法是利用CSS的`background`属性,将图标作为背景图片设置到`&lt;li&gt;`元素上。这种方式提供了更多的灵活性,可以调整图标的位置、大小等。例如: ```html .with-icon { background-image: url('icon.png'...

    用ul、li标签创建css横向导航菜单示例

    创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,...对导航条使用无序列表似乎是不符合直观感受的,因为我们习惯于把无序列表作为一个竖着推起来的列表项目,每个前面都放着一个列表预设

    JS动态增加删除UL节点LI及相关内容示例

    它首先获取UL元素,然后创建一个新的LI元素,并向其中插入文本内容和一个删除链接(该链接同样绑定了del函数)。之后,将这个新的LI元素插入到UL元素中。 add_car函数关联了一个下拉选择框(select元素),当选择框...

    jQuery在ul中显示某个li索引号的方法

    然后可以通过在页面上相应的位置插入这段索引,例如通过添加一个span标签来显示索引号。 当然,在实际应用中,我们可能希望将索引号显示在列表项内部或者旁边,而不是在一个新创建的元素内。这时,我们可以使用...

    javaScript动态添加Li元素的实例

    在本示例中,定义了addLi函数,该函数接收姓名、邮箱和电话号码作为参数,并使用createElement来创建一个新的li元素。通过setAttribute方法为新创建的li元素设置class属性,然后使用addSpan和addDelBtn两个辅助函数...

    angular或者js怎么确定选中ul中的哪几个li

    具体操作是,在每个`&lt;li&gt;`元素中插入一个隐藏的`radio`按钮,并将其`name`属性设置为相同的值,以便所有单选按钮都属于同一组,从而实现单选功能。 ```html &lt;ul&gt; &lt;li&gt; ;"&gt; 选项1 &lt;/li&gt; &lt;li&gt; ;"&gt; 选项2 &lt;/li...

    基于正则表达式实现UL下LI的样式替换功能

    首先,我们来看一个基本的例子,尝试在填充到`&lt;ul id="UlContent"&gt;`中的`&lt;li&gt;`元素后进行替换。这通常涉及到遍历所有`&lt;li&gt;`元素,查找匹配的文本并应用新的样式: ```javascript $("#UlContent li").each(function ...

    javascript操作ul中li的方法

    本文实例讲述了javascript操作ul中li的方法。分享给大家供大家参考。具体如下: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;...

    基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍

    昨天到今天上午都在查一个IE的bug,情形如下:通过异步请求获取json数据,然后拼接成html代码,最后使用innerHTML类似方法插入到文档流中。在chrome下和IE89下均表现正常。结果已进入IE7,浏览器就崩溃,更别提IE6了...

    jquery操作ul的一些操作笔记整理(干货)

    - 遍历数组使用$.each()方法,为每个数组元素创建一个新的&lt;li&gt;元素,并通过 prepend()方法添加到列表的最前面。 - 这里使用了$.parseJSON()来将字符串转换成JSON对象,尽管在文中变量名打印错误(应为data而非data...

    ul里不能直接嵌套div(在ie7以前版本)

    在上述示例中,我们看到一个`&lt;ul&gt;`列表,其中包含五个`&lt;li&gt;`元素,然后紧接着是一个`&lt;div&gt;`元素。在IE7及更早版本中,由于浏览器解析机制的限制,`&lt;div&gt;`不会被当作独立的元素处理,而是被其最近的合法父元素——...

    JS实现点击上移下移LI行数据的方法

    这两个函数接收两个参数,一个是当前被操作的`&lt;li&gt;`元素,另一个是父容器(即`&lt;ul&gt;`元素)的`id`。 `moveSonU`函数的工作原理是找到当前元素的前一个兄弟元素(`previousSibling`),然后使用`insertBefore`方法将...

    js ul html

    通过遍历`message`数组,每一轮循环都会根据当前元素的`RoleId`和`RoleName`属性生成一个新的`&lt;li&gt;`元素,并添加到`HTMLStr`中。 ```javascript for (var i = 0; i ; i++) { HTMLStr += "&lt;li id='" + message[i]....

    用jquery写的二级menu

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务,使得创建动态网页变得更加容易。 在jQuery中实现二级菜单,通常涉及到以下知识点: 1. **选择器(Selectors)**:...

    Emmet Cheat Sheet PDF版

    例如,输入`.class`会生成一个`&lt;div class="class"&gt;&lt;/div&gt;`,而`ul&gt;.class`会生成一个`&lt;li class="class"&gt;&lt;/li&gt;`。 在实际开发中,还可以通过Emmet的扩展命令来完成更加复杂的操作。例如,可以在Emmet的缩写前加上`...

    Jquery实验报告.doc

    - `$("&lt;li&gt;香蕉&lt;/li&gt;")`:创建一个新的`&lt;li&gt;`元素,并设置其文本为“香蕉”。 - `$("&lt;li title='香蕉'&gt;香蕉&lt;/li&gt;")`:创建带有`title`属性的新`&lt;li&gt;`元素。 4. **元素操作**: - `.append()`:向指定元素添加...

    li中插入img图片间有空隙的解决方案

    在网页布局中,我们经常会遇到将`&lt;img&gt;`标签放入`&lt;li&gt;`列表项中进行展示,例如创建一个图片轮播、产品展示等效果。然而,一个常见的问题就是当多个`&lt;img&gt;`标签并排排列时,它们之间会出现意想不到的3像素左右的间隙...

Global site tag (gtag.js) - Google Analytics