JQuery创建DOM元素方法解析

最新推荐文章于 2023-08-03 15:30:00 发布
最新推荐文章于 2023-08-03 15:30:00 发布
阅读量1.4k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42536491/article/details/80798881
版权

你知道如何创建DOM元素吗，这里向大家描述一下，到目前为止可以看出，jQuery的作者使得$()函数（你的记忆里它只是jQuery()函数的别名而已）足够通用以便履行许多职责，从而避免把一堆全局性的名称引入JavaScript命名空间。

创建DOM元素

到目前为止可以看出，jQuery的作者使得$()函数（你的记忆里它只是jQuery()函数的别名而已）足够通用以便履行许多职责，从而避免把一堆全局性的名称引入JavaScript命名空间。好，还有一个职责需要探讨。

通过给$()函数传递包含HTML标记的字符串，可以即时创建相应的DOM元素。例如，新建段落元素如下所示：

 

  1. $("<p足球平台出租>Hithere!</p>") 
 

但创建无实体的DOM元素（或元素层次结构）不是那么有用。通常，通过这种调用而创建元素层次结构之后，接着利用jQuery的一个DOM操作函数对其进行操作。
 

请看代码清单1-1的示例。
 

代码清单1-1即时创建HTML元素
 

2018062<a href=足球平台出租204/4foje5ty4j5.jpg" />
 


 此代码在文档<body>中建立名为followMe的现有HTML段落元素。在<head>节的脚本块里，建立文档就绪处理程序，利用如下语句把新建的段落元素插入DOM树的现有元素之后：
 $("<p>Hithere!</p>").insertAfter("#followMe");
 

结果如图1-2所示。
 

3sahl1t3fuk.jpg
 


 在第2章里将研究整套DOM操作函数，你将看到jQuery提供许多方式去操作DOM，以便获取我们想要的任何结构。既然你已经了解jQuery的基本语法，下面请看该库最强大的一个特征。
 

您可能感兴趣的文章:
 
JavaScript项目优化总结_0
                

        

        

    




    

      

        

            

              
                
                  qq157015557
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
jQuery创建DOM元素实例解析

				
			

			

				

					10-24
				

			

		

		

			
				
主要介绍了jQuery创建DOM元素的方法,实例分析了jQuery使用$直接创建DOM元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

			
		

	



                

              
                



	

		

			

				
					
jquery之Dom操作

				
			

			

				

					m0_72694993的博客
				

				

					11-04
					
					961
					
				

			

		

		

			
				
().toggleClass("类名");语法格式：$().each(function(index,element){});jQuery对象.attr("属性名", "属性值");$("div").empty()清空div下的内容和元素。$("div").remove()删除所有div元素。$().css("属性名", "属性值");$().removeClass("类名");$().addClass("类名");$().css("属性名");$().html("内容");$().text("内容");

			
		

	



                


  
              

                


	

		

			

				
					
Jquery（二）Dom元素的操作

				
			

			

				

					weixin_51760209的博客
				

				

					07-29
					
					2524
					
				

			

		

		

			
				
1.表单类型过滤器1.2text单行文本框3.password密码框4radio单选框5checkbox复选框6.submit提交按钮7.image图像域2.表单状态过滤器1.enabled可用的2disabled禁用的3.checked被选中的4.selected下拉框被选择的3.内部插入4.外部插入5.Jquery操作dom元素httpshttpshttps。...

			
		

	





	

		

			

				
					
创建 DOM 元素的几种方式

				
			

			

				

					angry_rooster的博客
				

				

					06-23
					
					8104
					
				

			

		

		

			
				
通过write()、createElement()和innerHTML创建元素
document.write()
document.write()是向文档写入内容，参数是一个包含要写入文档的文本的字符串
document.write(markup);

类似的还有一个document.wirteln()，只是最后紧跟一个换行符
如果字符串中有标签元素，会被识别为标签元素，并在文档中创建一个对应元素节点


但如果在文档加载完毕后才调用document.write()，则会重写整个文档，将之前所有的内容覆盖


			
		

	



		

			
		



	

		

			

				
					
jQuery添加DOM节点常用的5种方法

				
			

			

				

					不动声色的小蜗牛的博客
				

				

					07-19
					
					4893
					
				

			

		

		

			
				
一、内部插入（前插入、后插入）：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery添加DOM节点常用的五种方法</title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body&g

			
		

	





	

		

			

				
					
JavaScript（三）——DOM操作之如何创建DOM对象

				
			

			

				

					似水流年，是谁苍白了等待
				

				

					01-12
					
					1432
					
				

			

		

		

			
				
前言：
上篇文章大概说了一下DOM，但是还不是很了解，这里在说说。

一、什么是DOM？

DOM是英文Document Object Model的缩写，即文档对象模型。它是一种跨平台的、独立于编程语言的API，它把HTML、XHTML或XML文档当作一个树结构，而每个节点视为一个对象，这些对象可以被编程语言操作，进而改变文档的结构，映射到文档的显示。相信学习过BS的人都知道，对HTML应用很广...

			
		

	





	

		

			

				
					
SwiftSoup：SwiftSoup：具有最好的DOM，CSS和jquery的纯Swift HTML解析器（支持Linux，iOS，Mac，tvOS，watchOS）

				
			

			

				

					02-03
				

			

		

		

			
				
 它使用DOM，CSS和类似jQuery的最佳方法，为提取和操作数据提供了非常方便的API。 SwiftSoup实现WHATWG HTML5规范，并将HTML解析为与现代浏览器相同的DOM。  从URL，文件或字符串中抓取并解析HTML  使用DOM遍历或CSS...

			
		

	





	

		

			

				
					
超实用的jQuery代码段

				
			

			

				

					03-04
				

			

		

		

			
				
第2章 jQuery操作DOM元素 2.1 如何验证某个元素是否为空 2.2 检查特定的HTML元素是否存在 2.3 判断HTML元素是否嵌套 2.4 获取当前元素的索引值 2.5 插入节点元素 2.6 复制节点元素 2.7 替换节点元素 2.8 删除节点...

			
		

	





	

		

			

				
					
jQuery.parseHTML() 函数详解

				
			

			

				

					11-29
				

			

		

		

			
				
如果创建的DOM元素用于另一个文档，例如iframe，则应该指定该iframe的document对象。 安全考虑：大多数jQuery API都允许HTML字符串在HTML中包含运行脚本。 jQuery.parseHTML()不会运行解析的HTML中的脚本，除非你...

			
		

	





	

		

			

				
					
DOM之元素的 创建+添加+删除+克隆

				
			

			

				

					weixin_47075145的博客
				

				

					07-18
					
					2308
					
				

			

		

		

			
				
方式2利用innerHTML创建元素（不推荐用）innerHTML属性值不运行时，当作字符串，运行时当作js代码。

			
		

	





	

		

			

				
					
jquery的DOM节点操作(创建和插入元素节点)

				
			

			

				

					qq_45308912的博客
				

				

					11-24
					
					1817
					
				

			

		

		

			
				
1.创建元素节点

2.插入节点
动态创建新元素节点后，需要执行插入或追加操作，否则不会在页面显示出来。
按照元素的层次关系来分，可以分为内部和外部两种方法
元素内部插入子节点
元素内部插入子节点有两种方式，推荐使用红框框的方式

元素外部插入子节点
元素内部插入子节点也有两种方式，推荐使用红框框的方式


...

			
		

	





	

		

			

				
					
DOM系列之创建元素

				
			

			

				

					老__L的博客
				

				

					07-20
					
					333
					
				

			

		

		

			
				
不同浏览器下，innerHTML 效率要比 createElement 高。

			
		

	





	

		

			

				
					
js基础知识（二十七）--DOM对象的创建、插入

				
			

			

				

					weixin_47928499的博客
				

				

					08-08
					
					3097
					
				

			

		

		

			
				
DOM对象的创建、插入

			
		

	





	

		

			

				
					
七、 jQuery 操作 DOM

				
			

			

				

					m0_72166275的博客
				

				

					08-03
					
					619
					
				

			

		

		

			
				
当网页被加载时，浏览器会创建当前网页的 DOM 对象。JavaScript 通过提供的方法对 DOM 节点进行操作，实现页面的交互；jQuery 提供了一系列操作 DOM 的方法；一方面简化了 JavaScript 操作 DOM的写法；另一方面解决了浏览器的兼容性问题。JavaScript 操作 DOM 分为三类，即 DOM Core(核心)、HTML-DOM 和 CSS-DOM，jQuery 操作 DOM 同样分为这三类。

			
		

	





	

		

			

				
					
jQuery DOM操作 插入元素

				
			

			

				

					Mr_XMeng的博客
				

				

					12-08
					
					639
					
				

			

		

		

			
				
jQuery DOM 操作 插入元素
一 、 插入元素
1> 内部插入元素
    <div class="insideAdd">
       <p>
           在内部插入元素
       </p>
   </div>

1、append（’插入的元素’)，插入到末尾
$('.insideAdd').append('<h2>222</h2>');
//插入标签元素
$('.insideAdd').append($(

			
		

	





	

		

			

				
					
jQuery基础总结

				
			

			

				

					YanHSama的博客
				

				

					02-20
					
					441
					
				

			

		

		

			
				
jQuery入门
jQuery基础：初始jQuery
jQuery元素操作
jQuery对象
jQuery选择器
元素遍历
jQueryDOM节点操作
jQuery事件操作
jQuery动画特效
jQuery操作Ajax
jQuery插件机制



			
		

	





	

		

			

				
					
jQuery之增加DOM元素

				
			

			

				

					sandalphon4869的博客
				

				

					01-03
					
					851
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
  

			
		

	





	

		

			

				
					
DOM创建元素的三种方式

				
			

			

				

					LUXCC6的博客
				

				

					11-23
					
					482
					
				

			

		

		

			
				
创建元素的三种方式及学习代码

			
		

	





	

		

			

				
					
JQuery获取DOM元素

				
			

			

				

					weixin_34060741的博客
				

				

					01-17
					
					457
					
				

			

		

		

			
				
jQuery获得的对象并不和我们平时使用getElementById获得的对象一样。所以一些新手就很迷惑，为什么${”#Element”}不能直接innerHTML，这就是原因所在。  两种方法获取DOM元素。  取出集合中的某一项，或者直接get方法  jQuery对象与DOM对象的转换  只有jQuery对象才能使用jQuery定义的方法。注意DOM对象和jQuery对象是有区别的，调用方法时...

			
		

	





	

		

			

				
					
js 正则匹配dom字符串

					
最新发布

				
			

			

				

					09-12
				

			

		

		

			
				
例如，可以使用 JavaScript 中的 `document.createElement`、`document.createTextNode`、`setAttribute` 等方法来构建 DOM 元素，或使用类似 jQuery、React 等的库来操作 DOM。   ### 回答2： 在JavaScript中，可以...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值