开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js 在ul 里面追加li

在JavaScript中，向<ul>元素内追加<li>元素是一个常见的操作，通常用于动态地添加列表项。以下是实现这一功能的基础概念和相关步骤：

基础概念

DOM（Document Object Model）：DOM是HTML和XML文档的编程接口，它提供了对文档的结构化的表示，并定义了访问和操作文档的方式。
Node：DOM中的基本对象，可以是元素节点、文本节点等。
createElement()：用于创建一个新的元素节点。
appendChild()：用于将一个节点添加到指定父节点的子节点列表的末尾。

实现步骤

获取到<ul>元素。
创建一个新的<li>元素。
将新的<li>元素添加到<ul>元素中。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态添加列表项</title>
</head>
<body>

<ul id="myList">
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

<button onclick="addListItem()">添加列表项</button>

<script>
function addListItem() {
  // 获取ul元素
  var ul = document.getElementById('myList');
  
  // 创建一个新的li元素
  var li = document.createElement('li');
  
  // 设置li元素的内容
  li.textContent = '新的列表项';
  
  // 将新的li元素追加到ul元素中
  ul.appendChild(li);
}
</script>

</body>
</html>

优势与应用场景

动态内容更新：适用于需要实时更新内容的网页，如社交媒体的动态发布、新闻网站的最新消息推送等。
用户交互增强：通过按钮点击或其他用户操作触发列表项的添加，提升用户体验。
数据可视化：在数据驱动的应用中，可以将数据动态地展示为列表形式。

可能遇到的问题及解决方法

元素未找到：如果getElementById未能找到对应的元素，可能是ID拼写错误或元素尚未加载。确保HTML结构正确，并在DOM完全加载后再执行JavaScript代码。
性能问题：频繁操作DOM可能导致页面重绘和回流，影响性能。可以考虑使用文档片段（DocumentFragment）来优化性能。

示例代码（使用DocumentFragment优化）

function addListItems(items) {
  var fragment = document.createDocumentFragment();
  items.forEach(function(itemText) {
    var li = document.createElement('li');
    li.textContent = itemText;
    fragment.appendChild(li);
  });
  document.getElementById('myList').appendChild(fragment);
}

// 使用示例
addListItems(['列表项3', '列表项4', '列表项5']);

通过上述方法，可以有效地在<ul>元素中追加多个<li>元素，同时减少对DOM的操作次数，提高页面性能。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

jQuery就业课系列之.jQueryDOM

4.2 追加节点语法功能 append(content) $(A).append(B)表示将子元素B追加到A中 prepend(content) $(A). prepend (B)表示将子元素...//$(".gameList").before("ul>li>海文泽拉斯li>ul>") $(".gameList").after("ul>li...li>艾泽拉斯li> li>起拉希姆li> ul> 追加<!...<img src='图片路径' title='超级炫图片'/ src，title就是img的属性，在DOM里面就是属性节点。

741 0

JQuery高级

js里面命名的时候可以是数字、字母、下划线或者美元符号。是没有问题的。在工作中写代码的时候，每一个功能实现的时候要加注释，方便协同工作，养成良好的习惯。...当在入口函数里面的事件的时候，如果有大段的代码，一般工作中都是在外面封装一个函数，然后在事件中进行调用。...；2、使用追加函数将节点变量追加到指定位置 var $li = $('li>22222li>') // $('ul').append( $li )...// $li.appendTo( $('ul') ) // $('ul').prepend( $li ) // $li.prependTo...-- 3 --> ul> li>11111li> ul> <!

1.5K5 0

ajax使用案例

谷歌有个格式化的插件，也可以用网上的格式化一下方便阅读；复制过来格式化一下：这就是一个json文件然后可以复制过来，方便自己调用时查看：将1处的接口2放到ajax的url里面进行调用，在ajax...标签并追加到id是box下的ul中，显示返回数据中所有的name并记录是哪条数据的（通过id区分）。...注意这里，在反引号里面需要{变量}引用，在外面似乎是不需要的，这里在外面是加了{}报错语法问题。在反引号外面这个变量不加{}才是对的。//疑问，{}引用变量只是反引号中引的吗？...既然要显示，下面是有个div的，div里面有个ul，ul下有存放多个python或运维等的相关内容的li。现在以标题为例，只写这个标题只看第一条数据：红框里1就是表的一条记录。...点击之后已经添加了，在原来的基础上追加的，那么需要先清空再创建li标签魔降风云变

11.6K2 0

Jquery入门基础教程免费版

同样，在jQuery里面，我们要操作页面对象还是需要找对象，找页面对象，就是通过各类的选择器来找，简化我们的业务代码量。...在jquery里面，使用[]来指定属性选择器，基本选择器[属性选择器] 属性选择器符号说明用法 $("a[href]") 选择所有包含href属性的元素 $("a[href]").css("background...//$(".gameList").before("ul>li>海文泽拉斯li>ul>") $(".gameList").after("ul>li>海文泽拉斯li>ul>...li>三星老船长li> li>艾泽拉斯li> li>起拉希姆li> ul> 追加<!...<img src='图片路径' title='超级炫图片'/ src，title就是img的属性，在DOM里面就是属性节点。

1021 0

第三节 json数据绑定以及dom回流重绘、映射

浏览器中，提供了一个叫做(window.JSON)JSON的属性，它里面提供了两个方法： 1>JSON.parse(xxx) 在ie6~8不支持 2>JSON.stringify(xxx) 在ie6...> li>1li> li>19li> li>10li> li>2li> ul> js写法： var oul = document.getElementsByTagName...('ul')[0]; //获取到类数组 var ali=document.getElementsByTagName('li'); //将类数组转换为数组 var arr = utils.listToArray...原因：由于dom映射机制，操作的是每一个li元素对象，把li元素对象的顺序追加到oul中，同时也相当于让页面中的li标签的顺序调整了 dom映射机制：页面中的标签和js中获取到的元素对象（元素集合）...是紧紧的绑定在一起的，页面中的html结构改变了，js中不需要重新获取，集合里面的内容也会跟着自动改变作业:复杂的表格排序详见案例库升降序的排列规律：利用了-1*1=-1 -1*-1=1的特点

1.3K2 0

html图片左右无缝循环滚动示例

原理：（以左方向为例）先向左移动一个图片的宽度，此时第一个图片已经看不见了，这个时候将第一个标签元素克隆后追加到末尾，然后将第一个元素移除。达到循环滚动的效果。右移也是同理。.../jquery.min.js"> js/center.js"> <...function() { scrollRight(); }); /*向左滑动*/ function scrollLeft() { /*先向左移动一个图片的宽度移动后在末尾追加第一个元素...ul li:first').clone()); $('ul li:first').remove(); }); /*将left值置为0*/ $('ul').animate...$('ul li:last').remove(); }); /*完成上面动作后将left置为0*/ $('ul').animate({ left: 0 },

10.7K2 0

「jQuery」基础 - 03

li").click(); $("ul").on("click", "li", function() { alert(11); }); // click 是绑定在ul 身上的，但是触发的对象是...ul 里面的小li // (3) on可以给未来动态创建的元素绑定事件 // $("ol li").click(function() { // alert(11); // }) $("ol")...因为ul中的li是JS动态创建的，在页面加载时Docoment中并没有此元素，选择器并不能选取。...先要读取本地存储原来的数据（声明函数 getData()），放到这个数组里面。之后把最新从表单获取过来的数据，追加到数组里面。...，则是待办事项，就把列表渲染加载到 ol 里面 1.7.7 案例：toDoList 统计正在进行个数和已经完成个数在我们load 函数里面操作声明2个变量：todoCount 待办个数 doneCount

2.8K3 0

黑马程序员----基于BootStrap框架的网页制作综合案例

ul> li> ul> li> ul> 里面引入地址--> js/jquery-1.11.3.min.js"> js/bootstrap.min.js"> ---- 效果演示:

5712 0

selenium爬取博客园文章保存到mysql并自动发布

分析目标网站：https://www.cnblogs.com/ 爬取的内容是编程语言里面的python技术文章 ?...它这里是有js动态加载的标签，而且经过观察()里面的数字是会随机变化的，并不是写死的(推测是一种防爬虫策略)。如何解决呢？...直接获取标签的text文本内容，然后在把text内容赋值给xpath(标签选择器)，这样不管数字如何变化，得到的都是最新的数字，话不多说，直接上代码: from selenium import webdriver.../li[@id='cate_item_2']/a").text print(label_content) # 模拟鼠标悬停加载js,获取下级目录的标签 label_xpath = "//div[@id.../li[@id='cate_item_2']/a").text # 模拟鼠标悬停加载js,获取下级目录的标签 label_xpath = "//div[@id='cate_title_block

8072 0

jQuery DOM操作

序号方法描述实例 1 append() 向每个匹配的元素内部追加内容。...var $li = $("ul li:eq(1)").remove(); // 获取第2个li>元素节点后，将它删除 $li.appendTo("ul"); // 将刚才删除的节点重新添加到...ul>元素中 $("ul li").remove("li[title!...var $li = $("ul li:eq(1)").detach(); // 获取第2个li>元素节点后，将它删除 $li.appendTo("ul"); // 重新追加此元素... ul> li title='苹果'>苹果li> li title='橘子'>橘子li> li title='菠萝'>菠萝li>

2K6 0

VUE.js高级

-- li v-for="临时变量 in 序列">li> --> li v-for="i in mylist">{{ i }}li> ul>...ul> li v-for="i in mydict">{{ i }}li> ul> li v-for="(i, j) in mylist">{{ j+1 }}、{{ i }}li> ul> ul...> li v-for="(i, j) in mydict">{{ j }}: {{ i }}li> ul> <script.../接口名在成功后的的回调函数里面写this的话会出错，是语言的bug，不是代码有问题。

4.3K8 0

从零开始学 Web 之 DOM（五）元素的创建

但是在页面加载的时候不会。...>li>列表一li>li>列表二li>li>列表三li>ul>"; }; 方式一的方式太过死板，li 标签的个数和内容都是固定的...，如果增加 li 的个数需要修改源码。...>"+value[i]+"li>"; } str += "ul>"; my$("dv").innerHTML = str;...insertBefore：在某个元素前添加 removeChild：删除元素

8412 0

面向对象版tab 栏切换

双击tab项文字或者内容项文字可以修改里面的文字内容 2.案例准备获取到标题元素获取到内容元素获取到删除的小按钮 x号新建js文件,定义类,添加需要的属性方法(切换,删除...">测试 ' + random + ''; // (2) 把这两个元素追加到对应的父元素里面 that.ul.insertAdjacentHTML('beforeend...和新的内容section 3.第二步: 把创建的两个元素追加到对应的父元素中. 4.以前的做法:动态创建元素createElement , 但是元素里面内容较多,需要innerHTML赋值在appendChild...追加到父元素里面. 5.现在高级做法:利用insertAdjacentHTMLO可以直接把字符串格式元素添加到父元素中 6.appendChild不支持追加字符串的子愫, insertAdjacentHTML...支持追加字符串的元素

2K3 0

前端成神之路-03_jQuery

演示代码 ul> li>我们都是好孩子li> li>我们都是好孩子li> li>我们都是好孩子...身上的，但是触发的对象是 ul 里面的小li // $("ul li").click(); $("ul").on("click", "li", function...演示代码 ul> li>我们都是好孩子li> li>我们都是好孩子li> li>我们都是好孩子...// 4.先要读取本地存储原来的数据（声明函数 getData()），放到这个数组里面。 // 5.之后把最新从表单获取过来的数据，追加到数组里面。...7.如果当前数据的done 为false，则是待办事项，就把列表渲染加载到 ol 里面 1.7.7 案例：toDoList 统计正在进行个数和已经完成个数 // 1.在我们load 函数里面操作 //

3K2 0

Vue.js-列表渲染原

> li v-for="item in items">{{item.message}}li> ul> li v-for="(item,index) in items">{{parentMessage}}-{{index}}-{{item.message}}li> ul>...> li v-for="value in object">{{value}}li> ul> js...中写上v-model的属性，用于与data里面的newTodoText双向绑定，同时v-on:keyup.enter 是按enter键后执行addNewTodo方法，实例的方法是在todos新增一项，并且把...ul> 追加

2.8K2 0

Vue

"> ul> li v-for="value in people"> {{ value...}} li> ul> new Vue({ el: '#d1', data: {..."> ul> li v-for="(value, key) in people" >...li> ul> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({...import axios from ‘axios’ 在methods里的方法里面写请求方式 axios(config) axios.request(config) axios.get(url[, config

2383 0

前端(四)-jQuery

注意：jq中已经创建好的同一节点，多次执行插入，只会执行一次 var $node2 = $("li>上海新增本土54例li>"); $node2.appendTo($("ul")); //执行...li>").prependTo($("ul"));//执行 $("li>罗永浩：那火烤中学高有问题li>").prependTo($("ul"));//执行 2 元素外部插入同辈节点方法说明...和最后一个li //先选取第一个li，然后end()清除.first()的过滤，回到$(".gameList li")，在选取last() //相当于两条语句： /* $(".gameList li")...="401" />li> ul> ul class="num"> li class="active">...li> li> 3 li> ul> <div

8.6K3 0

JavaScript高级

li标签，生成好li标签之后统一放到ul里面即可 2.设置ul的内容 li标签，生成好li标签之后统一放到ul里面即可 for(var i=0;i<arr.length;i++){ str += 'li>'+arr[...} ul id="content"> li>111111li> ul> 2.4.../a>li> li>li> ul>...onclick 在jq里面是click 目标------$(选择器) -----jq的选择函数----查找标签的作用 jQuery中的选择器和css里面的选择器一样。

1.7K3 0

jQuery中的筛选&文档处理——案例

> ul> 一对ul标签里面包含有li标签，ol标签，span标签。...过滤器在我们后边的学习中也会强调学习。我们先来看一下API里面怎么解释filter。...将内容添加到指定的元素后面案例：在li后面追加一个li标签我们直接来写代码看疗效： $("li").append("li>新加入的数据li>"); 这个时候我们会发现效果会给每一个li后面都追加一个...因为我们选择器选中的就是所有的li. 案例：插入到最后面(给ul中最后一个li中添加一个li) 我们再来看这个，给ul中的最后一个li中追加一个li。...然后在li中添加一个li $("ul>li").last().append("li>新加入的数据li>"); 这个是把内容追加到指定的元素内的最后面 3.1

2.8K3 0

面向对象版tab 栏切换

该对象具有切换功能该对象具有添加功能该对象具有删除功能该对象具有修改功能 2、案例准备获取到标题元素获取到内容元素获取到删除的小按钮 x号新建js...和新的内容section 第二步:把创建的两个元素追加到对应的父元素中....以前的做法:动态创建元素createElement ,但是元素里面内容较多,需要innerHTML赋值在appendChild 追加到父元素里面....现在高级做法:利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中 appendChild不支持追加字符串的子元素, insertAdjacentHTML支持追加字符串的元素...">测试 ' + random + ''; // (2) 把这两个元素追加到对应的父元素里面 that.ul.insertAdjacentHTML('beforeend

3.9K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭