关于JS中appendChild的用法

最新推荐文章于 2023-06-28 12:42:04 发布
最新推荐文章于 2023-06-28 12:42:04 发布
阅读量2.7k 收藏
点赞数 1
分类专栏： javascript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lykangjia/article/details/19168565
版权 
<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

在wcschool的这段代码中，我想知道var para=document.createElement("p");和para.appendChild(node);这两句代码的意义，因为我发现我把这两句代码删除以后，将element.appendChild(para)改成element.appendChild(node)运行结果是一样的。
 

结果不一样，修改之前的结果是这样的：
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
<p>这是新段落。</p>
</div>

改了之后是这样的：
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
这是新段落。
</div>

虽然在页面上看起来是一样的。

 

 


                

        

        

    




    

      

        

            

              
                
                  IT冲浪者
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
JS中appendChild追加子节点无效的解决方法

				
			

			

				

					10-17
				

			

		

		

			
				
在JavaScript中，`appendChild`方法是用于向元素的子节点列表末尾添加一个新的子节点。然而，在某些情况下，我们可能会遇到`appendChild`追加子节点无效的问题。这个问题通常与DOM操作的规则有关，特别是当尝试将一...

			
		

	



                

              
                



	

		

			

				
					
js中AppendChild与insertBefore的用法详细解析

				
			

			

				

					01-19
				

			

		

		

			
				
appendChild定义appendChild(newChild: Node) :...读起来好象有点拗口，简单地说就是将元素添加到指定的节点中appendChild用法target.appendChild(newChild) newChild作为target的子节点插入最后的一子节点之后 appendC

			
		

	



                


  
              

                


	

		

			

				
					
js中AppendChild与insertBefore的用法详细解析.docx

				
			

			

				

					01-21
				

			

		

		

			
				
js中AppendChild与insertBefore的用法详细解析.docx

			
		

	





	

		

			

				
					
js中appendChild的用法

				
			

			

				

					才不是小弱鸡的博客
				

				

					01-19
					
					1万+
					
				

			

		

		

			
				
0X00写在最前

   之前学习js时看到的appChild方法都是用于列表，也就是添加li标签之类，类似这样

今天在mdn上看到了新的用法，令人耳目一新，记录一下与大家共同分享

0x01项目地址

https://roy-tian.github.io/mdn-examples/javascript/gallery/

0x02 appendChild方法分析


var thumbBar ...

			
		

	



		

			
		



	

		

			

				
					
JavaScript中的appendChild（）方法

					
热门推荐

				
			

			

				

					每天学习一点点
				

				

					12-01
					
					8万+
					
				

			

		

		

			
				
1.appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

实例一：


&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt;
&lt;/head&gt;
&lt

			
		

	





	

		

			

				
					
js-appendChild的用法

				
			

			

				

					唐昊
				

				

					03-13
					
					820
					
				

			

		

		

			
				
1.先把元素从原有的父级上删除
2.添加到新的父级上
<!DOCTYPE html>
<html>
<head>
	<title>appendChild 高级运用</title>
</head>
<script type="text/javascript">
	window.onload=function(){
 ...

			
		

	





	

		

			

				
					
js appendChild方法应用

				
			

			

				

					zhuoyue93的博客
				

				

					08-11
					
					1089
					
				

			

		

		

			
				
js appendChild方法应用

			
		

	





	

		

			

				
					
初学js插入节点appendChild insertBefore使用方法

				
			

			

				

					01-19
				

			

		

		

			
				
 appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点 来说）。 insertBefore 方法 是在已有的节点前添加新的节点（相对于子节点来说的）。 来看个这个简单的实例：在id为box-co

			
		

	





	

		

			

				
					
javascript使用appendChild追加节点实例

				
			

			

				

					10-24
				

			

		

		

			
				
主要介绍了javascript使用appendChild追加节点的方法,实例分析了appendChild()函数增加结点的使用技巧,需要的朋友可以参考下

			
		

	





	

		

			

				
					
js中appendChild()方法

				
			

			

				

					优雅的博客
				

				

					11-24
					
					3万+
					
				

			

		

		

			
				
appendChild(Node)这个方法一般是在指定元素节点的最后一个子节点之后添加节点，但如果Node是页面中的DOM对象，那么就不是添加节点了，就是直接Move节点。
     ① 创建原来没有的节点

	
		苹果
		香蕉
		橘子
	


	window.onload = function(){
		//定义一个快捷方式
		function $(name){
			return

			
		

	





	

		

			

				
					
js AppendChild与insertBefore用法详细对比

				
			

			

				

					10-26
				

			

		

		

			
				
本篇文章主要是对js中AppendChild与insertBefore的用法进行了详细的对比。需要的朋友可以过来参考下，希望对大家有所帮助

			
		

	





	

		

			

				
					
详解javascript appendChild()的完整功能

				
			

			

				

					12-10
				

			

		

		

			
				
appendChild()常用功能。

  平时我们用appendChild的时候，都是向父级上添加子元素
  appendChild的另一个功能是，先把元素从原有父级上删掉，然后添加元素到新的父级。（移除再添加）。
代码说明


<!DOCTYPE html>
<html>
 <head>
  <title>appendChild的第二种功能</title>
  [removed]
   [removed]=function(){
    var oUl1=document.getElementById("ul1");
    var oUl2=document.getElementB

			
		

	





	

		

			

				
					
JavaScript之append、appendChild、innerText、innerHTML与textConten的区别、getTime、createElement、createTextNode

					
最新发布

				
			

			

				

					软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
				

				

					06-28
					
					5297
					
				

			

		

		

			
				
JavaScript之append、appendChild、innerText、innerHTML与textConten的区别、getTime、createElement、createTextNode

			
		

	





	

		

			

				
					
javaScript中appendChild的用法

				
			

			

				

					qwerewf的博客
				

				

					01-10
					
					9362
					
				

			

		

		

			
				
1.appendChild() 方法可向节点的子节点末尾添加新的子节点。
实例一：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.map{
			width: ...

			
		

	





	

		

			

				
					
 [js高手之路] dom常用API详解与应用

				
			

			

				

					weixin_33969116的博客
				

				

					08-23
					
					250
					
				

			

		

		

			
				
本文主要讲解DOM常用的CURD操作，appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),cloneNode(克隆节点)的语法与实战应用
一、appendChild: 向元素的内部最后面增加一个节点，或者移动一个现有的节点到元素的内部最...

			
		

	





	

		

			

				
					
appendChild()的定义和用法

				
			

			

				

					TTTiaotiao的博客
				

				

					08-03
					
					4514
					
				

			

		

		

			
				
appendChild() 方法向节点添加最后一个子节点。
提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。
您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。

...

			
		

	





	

		

			

				
					
js插入节点appendChild insertBefore使用方法区别

				
			

			

				

					m0_58845957的博客
				

				

					10-12
					
					306
					
				

			

		

		

			
				
首先 从定义来理解 这两个方法：
appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)
insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild)
相同之处：插入子节点
不同之处：实现原理方法不同。
　　　　　appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点 来说）。
　　　　 insertBefore 方法 是在已.

			
		

	





	

		

			

				
					
关于函数appendChild

				
			

			

				

					weixin_30273501的博客
				

				

					05-11
					
					254
					
				

			

		

		

			
				
问题起因：

<div id="container">
    <div class="comment">
        <h3 class="name">UserName</h3>
        <p>Hello World</p>
    </div>
</div>...

			
		

	





	

		

			

				
					
【JavaScript】——js中appendChild()、createElement()、createTextNode()用法

				
			

			

				

					严文文   Chris
				

				

					07-03
					
					1114
					
				

			

		

		

			
				
         DOM允许你创建自己的元素和文本节点，并把它们添加大文档树中。理论上上说，你可以从树中移除所有的元素，创建新元素，或者重整文档树，从而完全改变页面。但是在实践中，这个特性用起来有些限制。DOM也允许你克隆现有的元素，已便你能方便地复制文档的某一部分，今天我们主要讲讲appendChild()、createElement()、createTextNode()的用法//创建一个li新...

			
		

	





	

		

			

				
					
JavaScript中appendChild与insertBefore详细解析

				
			

			

				

					
				

			

		

		

			
				
JavaScript 中的 AppendChild 和 InsertBefore 是用来操作 DOM 元素的两个常用方法。这两个方法在网页开发中经常被用到，可以动态地向页面中插入新的元素或者调整元素的位置。在本文中，将对这两个方法的用法进行...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值