首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在追加之前检查最后一个动态创建的li元素是否已填充到ul中

在追加之前检查最后一个动态创建的li元素是否已填充到ul中,可以通过以下步骤实现:

  1. 首先,获取ul元素和最后一个li元素的引用。可以使用JavaScript的getElementById()、querySelector()或者getElementsByClassName()等方法来获取元素的引用。
  2. 然后,使用条件判断语句来检查最后一个li元素是否已填充到ul中。可以通过判断最后一个li元素的存在与否来确定是否已填充。例如,可以使用if语句来检查最后一个li元素是否存在,如果存在则表示已填充,否则表示未填充。
  3. 如果最后一个li元素已填充到ul中,则可以执行相应的操作。例如,可以向ul中追加新的li元素,或者修改最后一个li元素的内容。

以下是一个示例代码:

代码语言:txt
复制
// 获取ul元素和最后一个li元素的引用
var ul = document.getElementById("myList");
var lastLi = ul.lastElementChild;

// 检查最后一个li元素是否已填充到ul中
if (lastLi !== null) {
  // 最后一个li元素已填充到ul中
  // 执行相应的操作
  console.log("最后一个li元素已填充到ul中");
  // 追加新的li元素
  var newLi = document.createElement("li");
  newLi.textContent = "新的li元素";
  ul.appendChild(newLi);
} else {
  // 最后一个li元素未填充到ul中
  console.log("最后一个li元素未填充到ul中");
}

在这个示例中,我们首先通过getElementById()方法获取了id为"myList"的ul元素的引用,然后使用lastElementChild属性获取了ul中的最后一个li元素的引用。接下来,使用if语句判断最后一个li元素是否存在,如果存在则表示已填充,否则表示未填充。根据判断结果,我们可以执行相应的操作。在这个示例中,如果最后一个li元素已填充到ul中,则向ul中追加一个新的li元素。如果最后一个li元素未填充到ul中,则不执行任何操作。

请注意,以上示例中的代码仅为演示目的,实际应用中可能需要根据具体情况进行适当的修改和调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

50个必备实用jQuery代码段

$("ul > li").click(function () {   var index = $(this).prevAll().length; //prevAll([expr]): 查找当前元素之前所有的同辈元素...')").hide(); 如何创建嵌套过滤器: //允许你减少集合匹配元素过滤器, //只剩下那些与给定选择器匹配部分。...*包含了对这一has方法支持。 //该方法找出某个元素是否包含了其他另一个元素类或是其他任何你正在查找并要在其之上进行操作东东。...1.4可以使用delay()这一功能来实现方式(这很像是休眠) $(".mydiv").delay(5000).hide('blind', {}, 500); 如何把创建元素动态地添加到DOM...如何在jQuery克隆一个元素: var cloned = $('#somediv').clone(); 在jQuery如何测试某个元素是否可见 if($(element).is(':visible

6.7K00

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

不支持 ------------------------------数据绑定以及dom回流----------------------------------------------- 第一种方式 动态创建节点和把它追加到页面方式实现数据绑定...innerHTML=''+'0'+(i+4)+''+ary[i].name; oul.appendChild(ali1); } 优势:把需要动态绑定内容一个追加到页面...,对原来元素没有影响 弊端:浏览器每当创建一个li,我们就添加到页面,引发一次dom回流,最终导致回流次数过多,影响性能 第二种:字符串拼接方式:首先循环需要绑定数据,然后把需要动态绑定标签以字符串方式拼接到一起...以字符串方式获取到)+str 拼接完成整体还是字符串,最后把字符串统一添加到了页面,浏览器还需要把字符串渲染成对应标签 弊端:我们把新拼接字符串添加到ul,原来标签绑定事件消失了,鼠标滑过效果消失...原因:由于dom映射机制,操作是每一个li元素对象,把li元素对象顺序追加到oul,同时也相当于让页面li标签顺序调整了 dom映射机制: 页面标签和js获取到元素对象(元素集合)

1.2K20

Vue 相关学习笔记(一)

v-if是动态向DOM树内添加或者删除DOM元素 v-if切换有一个局部编译/卸载过程,切换过程合适地销毁和重建内部事件监听和子组件 循环结构 v-for 用于循环数组里面的值可以是对象,也可以是普通元素...currentIndex 为 0 给第一个li 添加 active 类名 通过动态绑定class 来实现 第一个li 索引为 0 和 currentIndex 值刚好相等 currentIndex...created 在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来 beforeMount 在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已...pop() 删除数组最后一个元素,成功返回删除元素值 shift() 删除数组一个元素,成功返回删除元素值 unshift() 往数组最前面添加一个元素,成功返回当前数组长度 splice...reverse() reverse() 将数组倒序,成功返回倒序后数组 替换数组 不会改变原始数组,但总是返回一个新数组 filter filter() 方法创建一个数组,新数组元素是通过检查指定数组符合条件所有元素

7.4K20

Vue-组件化

,不需要带括号; 如何在方法值发生了变化,则缓存就会刷新; 结论: 调用方法时,每次都需要进行计算,可以考虑将这个结果缓存起来,采用计算属性可以很方便做到这一点 计算属性主要特性就是为了将不经常变化计算结果进行缓存...,以节约我们系统开销; 插槽 1.创建一个Vuehtml文件模板 Titletitle...Vue组件 加入了两个插槽 3.再创建两个Vue组件可以补充到 插槽 Vue.component("todo",{ template: '\ <slot name...+this.todoItems[index]); this.todoItems.splice(index,1); // 一次删除一个元素 } } 这个方法一次删除一个元素,即删除当前元素...,删除之前会弹出删除元素名 3.在Vue组件中进行方法绑定 <todo-items slot="todo-items" v-for="(item,index) in todoItems"

36810

前端(四)-jQuery

将A节点追加到B节点子节点中 注意:jq已经创建同一节点,多次执行插入,只会执行一次 var $node2 = $("上海新增本土54例"); $node2.appendTo...($("ul")); //执行 //jq已经创建同一节点,多次执行插入,只会执行一次 $node2.appendTo($("ul")); //不执行 //只用每次创建节点,才会多次执行 $(...]); 获取子元素指定元素 3.6.2 遍历同辈元素 方法 说明 next() 获取当前元素一个同辈元素 prev() 获取当前元素一个同辈元素 slibings() 获取当前元素所有同辈元素...)转换为jQuery节点 }); 3.6.5 end() 结束当前链条最近筛选操作,并将匹配元素集还原为之前状态; //end():结束当前最后一次筛选,恢复到初始状态 $(".gameList...li最后一个li //先选取第一个li,然后end()清除.first()过滤,回到$(".gameList li"),在选取last() //相当于两条语句: /* $(".gameList li

8.5K30

前端三大框架之Vue-day01

view 即 我们HTML页面 vm (view-model) 控制器 将数据和视图层建立联系 vm 即 Vue 实例 就是 vm v-on 用来绑定事件 形式:v-on:click...-- 2、如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递, 并且事件对象名称必须是$event -->...v-if是动态向DOM树内添加或者删除DOM元素 v-if切换有一个局部编译/卸载过程,切换过程合适地销毁和重建内部事件监听和子组件 循环结构 v-for 用于循环数组里面的值可以是对象...-- 循环结构-遍历数组 item 是我们自己定义一个名字 代表数组里面的每一项 items对应是 data数组--> ...key来给每个节点做一个唯一标识 key作用主要是为了高效更新虚拟DOM ...

1.7K10

Vue零基础到高阶第二节☀️

-- 2、如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递, 并且事件对象名称必须是$event -->...v-show只编译一次,后面其实就是控制css,而v-if不停销毁和创建,故v-show性能更好一点。 v-if是动态向DOM树内添加或者删除DOM元素。...v-if切换有一个局部编译/卸载过程,切换过程合适地销毁和重建内部事件监听和子组件。 循环结构 v-for 用于循环数组里面的值可以是对象,也可以是普通元素。...在data 定义一个 默认 索引 currentIndex 为 0。 给第一个li 添加 active 类名。...通过动态绑定class 来实现 第一个li 索引为 0 和 currentIndex 值刚好相等。

5K20

Js如何实现升序和降序

前言 在网页,实现列表升序和降序,是一个比较常见操作,尤其是在做一些数据栓选表格时候,按照索引,时间等特定参数,提供升序和降序排列功能 具体示例 sort 原生js 在原生js主要是操作...var ul = document.getElementsByTagName('ul')[0]; // 判断是否包含子元素 if(ul.hasChildNodes()) {...ul.appendChild(arr[i]); // 添加到ul为子元素 } } } 如下是html结构 小红-1...)" value="降序或升序" /> 分析 上面的示例是先把容器html内容清空,最后,把数组数据以倒排序方式遍历并填充到之前ul容器里面 使用原生js方式就是要遍历DOM节点,然后依赖DOM...,b代表后一个数,做一个差值,就可以判断哪个大,哪个小 总结 升序和降序在Js一个比较常见操作,做一些简单排序操作可以基于sort方法实现

2.3K20

前端day13-JS(WebApi)学习笔记(attribute语法、DOM节点操作)

: 最后一个子节点(元素 文本 注释) 4.lastElementChild:最后一个元素节点 他们浏览器兼容问题与兄弟节点一致 我是班长小迷妹...():dom推荐方式 动态创建一个dom对象(空标签,需要自己设置属性)在内存 需要使用appendChild来添加到HTML document.write():慎用,因为可能会覆盖原本内容 覆盖内容原理了解即可...不会覆盖情况:如果在关闭这个文档流之前调用document.write(),则不会覆盖会覆盖情况:如果在关闭文档流之后调用document.write(),会开启一个文档流,此时会把上一个文档流内容覆盖...4.2-添加子元素:appendChild() appendChild()添加元素有三种情况 (1)如果是一个元素,则默认会添加到最后 (2) 如果是一个存在元素,相当于移动到最后面...(新元素,旧元素) 特点: 1.如果是新创建元素,则直接替换 2.如果是存在元素(不论这个元素是自己元素还是别人)会将新元素移动到旧元素位置,并且旧元素被移除 3.如果存在元素有子元素

3K11

Vue模板语法

-- 2、如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,                 并且事件对象名称必须是$event            -->            ...注意:v-bind:class指令可以与普通class特性共存 //1、 v-bind 中支持绑定一个对象 如果绑定一个对象 则 键为 对应类名 值 为对应data数据 ​ <head...设置为none, 控制元素是否显示(已经渲染到了页面) v-show只编译一次,后面其实就是控制css,而v-if不停销毁和创建,故v-show性能更好一点。...v-if是动态向DOM树内添加或者删除DOM元素 控制元素是否渲染到页面 v-if切换有一个局部编译/卸载过程,切换过程合适地销毁和重建内部事件监听和子组件 3.循环结构 v-for遍历数组...:帮助Vue区分不同元素,从而提高性能 key来给每个节点做一个唯一标识 key作用主要是为了高效更新虚拟DOM <li :key='item.id' v-for='(item,index

6.7K40

Vue模板语法

-- 缩写 --> 绑定对象 我们可以给v-bind:class 一个对象,以动态地切换class。...注意:v-bind:class指令可以与普通class特性共存 1、 v-bind 中支持绑定一个对象 如果绑定一个对象 则 键为 对应类名 值 为对应data数据 <!...v-if是动态向DOM树内添加或者删除DOM元素 v-if切换有一个局部编译/卸载过程,切换过程合适地销毁和重建内部事件监听和子组件 循环结构 v-for 用于循环数组里面的值可以是对象...-- 循环结构-遍历数组 item 是我们自己定义一个名字 代表数组里面的每一项 items对应是 data数组--> <li v-for="item in items...key来给每个节点做一个唯一标识 key作用主要是为了高效更新虚拟DOM ...

1.9K30

jquery获取第几个子元素_js获取元素指定子元素

先说说通过位置选择几个操作: :first:默认情况下是相对整个页面来说一个li:first表示整个页面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且是在ul...下元素; :last:同上了,只是是最后一个而已; :first- child:为每个父元素匹配第一个元素li:first-child返回每个ul一个li元素。...可以这样理解,页面元素有相同元素 ,并且里面又包含li元素,那么就取第一个li元素,每个子类集合都要进行判断,直到找出所有符合要求li元素; :last-child:这个也与上面相对了,...; :eq(n):第n个匹配元素(n从0开始),li:eq(3)返回整个页面的第四个li元素ul li:eq(1)返回页面一个ul元素第二个li元素,注意:只匹配一次就返回了; :gt...(n):第n个匹配元素(不包括)之后元素(n从0开始),ul:gt(2)返回从第3个ul开始所有ul元素(含第三个); :lt(n):第n个匹配元素(不包括)之前元素(n从0开始),ul

27.1K30

前端成神之路-vue01

view 即 我们HTML页面 vm (view-model) 控制器 将数据和视图层建立联系 vm 即 Vue 实例 就是 vm v-on 用来绑定事件 形式:v-on:click...-- 2、如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递, 并且事件对象名称必须是$event -->...v-if是动态向DOM树内添加或者删除DOM元素 v-if切换有一个局部编译/卸载过程,切换过程合适地销毁和重建内部事件监听和子组件 循环结构 v-for 用于循环数组里面的值可以是对象...-- 循环结构-遍历数组 item 是我们自己定义一个名字 代表数组里面的每一项 items对应是 data数组--> ...key来给每个节点做一个唯一标识 key作用主要是为了高效更新虚拟DOM ...

1.1K20

关于使用现代CSS新特性布局嵌套评论组件尝试,希望对你有所启发

使用CSS样式变量查询 我们可以检查容器是否添加了CSS变量--nested: true,并根据此对子元素进行样式设置。.../> 使用样式查询,我可以检查CSS变量是否存在,并根据其来为 元素添加样式。...我们可以使用CSS :has 伪类来检查一个 元素是否包含一个 ,如果是,则应用所需CSS样式。...} } 最后,我们需要为深度为2每个 添加弯曲元素,同时在深度为2所有 除了最后一个之外,都需要添加连接线。...我们需要按照以下逻辑进行操作: 为深度为2每个 添加弯曲元素。 为深度为2所有 除了最后一个之外每个 添加连接线。 弯曲元素一个带有边框和左下角半径矩形。

29430

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

1last():获得匹配最后一个元素 刚才是数组一个元素,现在我们来试试最后一个元素。...好不好用 uls.last().css("background","yellow"); 现在ul一个li  和 最后一个li都改变了背景色 2eq(N):获取匹配第N或-N个元素 获取到数组中指定某个元素...因为我们选择器选中就是所有的li. 案例:插入到最后面(给ul最后一个li添加一个li) 我们再来看这个,给ul最后一个li追加一个li。...首先我们要先找到ul最后一个li: $("ul>li").last()。...然后在li添加一个li $("ul>li").last().append("新加入数据"); 这个是把内容追加到指定元素最后面         ​​​​​​​    3.1

2.8K30

36 个JS 面试题为你助力金九银十(面试必读)

JS 主要有哪几类错误 JS有三类错误: 加载时错误:加载web页面时出现错误(语法错误)称为加载时错误,它会动态生成错误。 运行时错误:由于滥用HTML语言中命令而导致错误。...10.如何在JS动态添加/删除对象属性?...promise是js一个对象,用于生成可能在将来产生结果值。 值可以是解析值,也可以是说明为什么未解析该值原因。...例如: 从上面的示例,假设单击事件发生在li元素,在这种情况下,捕获事件将首先处理div,然后处理ul最后命中目标元素... 从上面的例子,假设click事件确实发生在冒泡模型li元素,该事件将首先由li处理,然后由ul处理,最后由div

7.2K30

为什么用 Svelte 写一个小程序如此快速?我用10分钟就搞定了!

A book 我们可以直接在Svelte文件顶层编写上述代码;我们不需要添加任何包装元素。...Svelte语法是HTML超集,所以任何在HTML文件中有效内容在Svelte文件也是有效。 现在问题是如何把动态部分放进去。...as book} {book} {/each} 我们添加了一个脚本标记,将与组件相关JavaScript逻辑放入其中。...如果您希望在控制流块包含多个顶级项目,那么也不必创建包装器元素。 一本书标题是用花括号包围变量输出。通常,当您在模板遇到花括号时,您就知道您输入是与svelte相关内容。...我们现在可以查看和添加书籍到我们列表!不过,它看起来并不那么漂亮,所以让我们对UI进行一些最后润色。首先,我们将添加一些CSS样式元素: <!

2.6K10
领券