点击li输出其innerHTML的几种方法

最新推荐文章于 2023-10-18 22:51:26 发布
最新推荐文章于 2023-10-18 22:51:26 发布
阅读量1.7k 收藏
点赞数
分类专栏： js jquery 文章标签： javascript 事件代理 let delegate on
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/konglingnan999/article/details/72910755
版权
本文介绍了在JavaScript中点击li元素获取innerHTML的三种方法，包括传统的直接绑定事件方式、利用事件委托的事件代理方法，以及使用ES6的let声明。此外，还提及了jQuery中的delegate和on方法，它们同样具有事件代理功能。
摘要由CSDN通过智能技术生成

html代码如下：

<ul id="lll">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

js实现方法：
1.传统方法


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  孃口三三
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？

				
			

			

				

					努力是为了站在万人之中，成为别人的光
				

				

					07-05
					
					26万+
					
				

			

		

		

			
				
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！
在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。

https://wanghao221.github.io/html-tips-tricks/


			
		

	



                

              
                



	

		

			

				
					
js标准事件模型、事件注册的几种方法及其区别、事件委托机制

				
			

			

				

					偷只猫来养的博客
				

				

					07-01
					
					899
					
				

			

		

		

			
				
js事件注册的几种方法及其区别



			
		

	



                


  
              

                


	

		

			

				
					
js 获取元素下面所有li的两种方法

				
			

			

				

					10-26
				

			

		

		

			
				
主要介绍了js如何获取元素下面所有的li，有哪些方法,需要的朋友可以参考下

			
		

	





	

		

			

				
					
经典的js问题  实现点击li能够弹出当前li索引与innerHTML的函数

				
			

			

				

					Kylin的专栏
				

				

					06-23
					
					7832
					
				

			

		

		

			
				
经典的js问题  实现点击li能够弹出当前li索引与innerHTML的函数


点击其中一项需要alert出如下结果：




按照我们平常的想法，代码应该是这样写的：
var myul = document.getElementsByTagName("ul")[0];
	var list = myul.getElementsByTagName("li");

	functio

			
		

	



		

			
		



	

		

			

				
					
JavaScript自动生成li节点 并把文本框的值赋给li.innerHtml

				
			

			

				

					hyzhang6的博客
				

				

					10-12
					
					1936
					
				

			

		

		

			
				
作者：hyzhang
时间：2017-10-11
描述：自动生成li标签 并把文本框的值赋给li标签
-->







window.onload =function(){
var  inpt = document.getElementById("txt");
var oUl =document.getElementById("ull");
var btn1 = d

			
		

	





	

		

			

				
					
码农成长记——innerHTML

				
			

			

				

					xueyue_zx的博客
				

				

					12-29
					
					331
					
				

			

		

		

			
				
1. 获取属性的值/给属性重新赋值
  xx.getAttribute(""); //获取属性的值
  xx.setAttribute("",a); //给属性重新赋值 a指代存储了值的变量

2. 可以给标签自定义属性并赋值

3. li.innerHTML= "新浪"; //更换标签内所有内容
    li.innerText=""; //只更换文本内容

4. 每次函数的变

			
		

	





	

		

			

				
					
html中输出语句怎么写,JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)...

				
			

			

				

					weixin_28900073的博客
				

				

					05-31
					
					1288
					
				

			

		

		

			
				
JavaScript 输出JavaScript 没有任何打印或者输出的函数。JavaScript 显示数据JavaScript 可以通过不同的方式来输出数据：使用 window.alert()弹出警告框。使用 document.write()方法将内容写到 HTML 文档中。使用innerHTML写入到 HTML 元素。使用 console.log()写入到浏览器的控制台。使用 window.al...

			
		

	





	

		

			

				
					
【Java 进阶篇】深入了解 JavaScript 的 innerHTML 属性

					
最新发布

				
			

			

				

					繁依Fanyi的博客
				

				

					10-18
					
					2509
					
				

			

		

		

			
				
在深入研究innerHTML属性之前，让我们先了解一下什么是DOM。DOM 是文档对象模型的缩写，它是HTML文档的编程接口，允许开发者通过编程方式访问、操作和更新HTML文档的内容和结构。DOM 将HTML文档表示为一个树状结构，每个HTML元素都是树中的一个节点，我们可以使用JavaScript来访问和修改这些节点。innerHTML是DOM元素的一个属性，它代表了该元素的HTML内容。也就是说，它包含了一个HTML元素的所有子元素、文本和标记。通过innerHTML。

			
		

	





	

		

			

				
					
JavaScript获取ul中li个数的方法

				
			

			

				

					10-20
				

			

		

		

			
				
在此场景中，我们需要掌握以下几种方法：  1. `document.getElementById()`  这个方法通过元素的id获取页面上的单个元素。每个id在HTML文档中应当是唯一的，因为该方法返回的是与指定id匹配的第一个元素。例如，如果...

			
		

	





	

		

			

				
					
innerHTML问题汇总以及和appendChild的区别

				
			

			

				

					weixin_46050814的博客
				

				

					02-23
					
					421
					
				

			

		

		

			
				
这两天写到前端代码时遇到*innerHTML*使用的不少坑，以下是我总结的坑以及对应的解决方案(希望各位童鞋能及时看到这章并解决自己的问题，不要像我一样又掉了几十根秀发…)
问题论述将以ul和li为例介绍，方便各位理解。
<ul id="uls">  
    <li> 我是li </li> 
</ul>/*输出：我是li*/

1.追加新的li到u...

			
		

	





	

		

			

				
					
innerHTML属性及实例

				
			

			

				

					ljq961206的博客
				

				

					08-05
					
					998
					
				

			

		

		

			
				
innerHTML属性

inner属性可以返回或设置元素中的内容

例如   &lt;li&gt;aaaaa&lt;/li&gt;  中

访问li.innerHTML可以获取内容aaaaa  

也可以赋内容给标签

 

实例:获取当前时间(每秒钟刷新)


&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;&lt;/...

			
		

	





	

		

			

				
					
【innerHTML和value】

				
			

			

				

					qq_51503734的博客
				

				

					11-17
					
					205
					
				

			

		

		

			
				
今天在学习js的时候发现了如下问题 element1.innerHTML = element2.innerHTML 是不能够完成赋值的。原因是element2 我写的是表单元素不是一般标签元素表单元素需要用element2.value才可以完成赋值操作













将 newli.innerHTML = text.innerHTML改成newli.innerHTML = text.value 之后，就可以输出啦








...

			
		

	





	

		

			

				
					
js控制html中ul列表li点击可以编辑

				
			

			

				

					weixin_34092455的博客
				

				

					10-28
					
					1325
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
动态生成布局html,JS中动态创建元素的三种方法总结(推荐)

				
			

			

				

					weixin_35075144的博客
				

				

					06-05
					
					1021
					
				

			

		

		

			
				
1、动态创建元素一 document.write()例如向页面中输出一个 li 标签document.write("123");body标签中就会插入但是这种方法几乎不用，因为这回影响页面的布局，甚至会将页面原来的内容冲刷掉，从而只显示输出内容2、动态创建元素二 innerHTMLvar box = document.getElementById("box");box.innerHTML = "这...

			
		

	





	

		

			

				
					
JavaScript 从入门到放弃（一）事件委托和使用innerHTML添加元素

				
			

			

				

					Tinywan
				

				

					09-30
					
					395
					
				

			

		

		

			
				

  
    &#13;
			一、使用事件委托
一个简单的需求，比如想给ul下面的li加上点击事件，点击哪个li，就显示那个li的innerHTML。这个貌似很简单！代码如下！

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;&lt;/tit

			
		

	





	

		

			

				
					
html的document操作

				
			

			

				

					影子
				

				

					04-15
					
					2535
					
				

			

		

		

			
				
代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>document测试</title>
		<!-- DOM操作--- 如何添加、移除、移动、复制、创建和查找节点等
		
		（1）创建新节点
		
		createDocumentFragment()//创建一个DOM片段
		
		createElemen...

			
		

	





	

		

			

				
					
JavaScript中的innerHTML使用

					
热门推荐

				
			

			

				

					qq_60115503的博客
				

				

					04-17
					
					6万+
					
				

			

		

		

			
				
innerHTML
innerHTML属性允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML,本篇文章就来给大家介绍关于innerHTML的用法

			
		

	





	

		

			

				
					
使用innerHTML动态生成标签

				
			

			

				

					想要全栈chris的博客
				

				

					02-16
					
					1715
					
				

			

		

		

			
				
var users = [
        {"name": "tdxy01","icon":"images/noavatar_small.gif"},
        {"name": "沉眠楚人","icon":"images/noavatar_small.gif"},
        {"name": "爱上karina","icon":"images/75_avatar_small.jpg"

			
		

	





	

		

			

				
					
js的几种页面输出格式

				
			

			

				

					06-10
				

			

		

		

			
				
JavaScript可以使用不同的方式输出页面内容，常见的几种页面输出格式有：  1. 使用document.write()方法输出HTML内容到页面上。 2. 使用innerHTML属性修改HTML元素的内容。 3. 使用console.log()方法在浏览器的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值