js after append

最新推荐文章于 2023-11-21 14:51:02 发布
最新推荐文章于 2023-11-21 14:51:02 发布
阅读量887 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Sugar_Elina/article/details/51897754
本文探讨了JavaScript中DOM元素的显示顺序问题及其解决方法，通过使用after()等方法进行DOM节点的插入操作来确保正确的执行顺序。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<span style="font-size:14px;">本来以为js代码写好显示出来click事件的发生是我写错了什么东西，找了好久没找到，最后知道是因为由于执行顺序问题，
js写的显示在页面上的后执行的，需要插入操作
<span style="background-color: rgb(255, 204, 204);">HTML代码：
<div id=<span style="background-color: rgb(51, 204, 0);">"addModal</span>">
   <div class="form-group col-md-6" style="left:25%" id=<span style="color:#333333;"><span style="background-color: rgb(51, 255, 255);">"selectArea"</span>></span>
						 
   </div>
   <div class="row" >
	<div id="formArea" class="col-sm-12"></div>
   </div>
   <div class="row">
	<div id="addFormArea" class="col-sm-12"></div>
   </div>
</div></span>
</span><h5>after() 方法在被选元素后插入指定的内容。（搜索到的方法）</h5><p><html>
<head>
<script type="text/<a target=_blank href="http://lib.youkuaiyun.com/base/18" class="replace_word" title="JavaScript知识库" target="_blank" style="color:#df3434; font-weight:bold;">JavaScript</a>" src="/<a target=_blank href="http://lib.youkuaiyun.com/base/22" class="replace_word" title="jQuery知识库" target="_blank" style="color:#df3434; font-weight:bold;">jQuery</a>/jquery.js"></script>
<script type="text/javascript">
$(function(){
  $("button").click(function(){
    $("span").after("<a href="#">这里也是</a>")</p><p>  })
});
</script>
</head></p><p><body>
<p>这是一个模块</p>
<button>after函数</button>
</body>
</html>
</p><p>结果如下：<pre name="code" class="html"><span style="font-size:14px;"><p>这是一个模块</p></span>
<a href="#">這也是</a>

span标签后面多了一个a标签

js代码：

$(function(){

var radio =
  ' <label >'+
  '<input  type="radio" name="address"  value="0" checked="checked" id="addNode" > '+'新增子地址'+
  '</label>'+
  '<label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>'+
  '<label>'+
  '<input type="radio" name="address" value="1" id="addAddress" />'+'新增详细地址'+         
  '</label>' ;
function getAddFormString(id,addressName,level){
        var a1 =
            '<form id="addForm" action method="post"  class="form-horizontal" style="display:none;">'+
            '<h4 style="text-align:center;">新增地址</h4>'+
            ......
             '<div class="modal-footer">'+
                 '<button type="submit" class="btn btn-success">新增</button>'+
             '</div>'+
        '</form>';
        return a1;
    }
  var s = getAddFormString(treeNode.id,addressName,treeNode.addressLevel+1);
  $("#selectArea").html(radio);
  $("#addFormArea").html(s );
  $("#addModal").after(radio);
  $("#addModal").after(s);
  $("#addNode").click(function(){
      $("#addForm").hide();
      $("#form").show();
        });
  $("#addAddress").click(function(){
     $("#addForm").show();
      $("#form").hide();
 });
});
这段代码不完整，只是取出主要代码的部分总结了一下




                

        

    

    
  



    



                



	

		

			

				
					
js(jquery)中常用追加元素的几种方法：append，appendTo，after，before，insertAfter，insertBefore，appendChild

				
			

			

				

					你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
				

				

					12-09
					
					1168
					
				

			

		

		

			
				
<script type="text/javascript">// <![CDATA[
$(function(){  
        //append(),在父级最后追加一个子元素  
        $(".append").click(function(){  
            $("#wrap").append("<p class='three'>我...

			
		

	



                

            
              



	

		

			

				
					
JS中使用 after 伪类清除浮动实例

				
			

			

				

					01-19
				

			

		

		

			
				
以前清除浮动的时候总是在想要清除浮动的元素后面添加

<div xss=removed></div>
或者写在br标签里面来解决，但这样会增加无语义的标签，下面是用after伪类实现，兼容多种浏览器

.clearfix:after{
  content:;
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
为兼容IE6,IE7，因为ie6,ie7不能用after伪类。加上下面代码
.clearfix{zoom:1}
一般情况下，如果父层内部有浮动(float)可能导致父层的高度为0，加上cl

			
		

	



              


  
              

                


	

		

			

				
					
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）

				
			

			

				

					逝者如风
				

				

					07-02
					
					9886
					
				

			

		

		

			
				
&lt;!DOCTYPE html&gt;&lt;html&gt;	&lt;head&gt;		&lt;meta charset="UTF-8"&gt;		&lt;title&gt;js中常用追加元素的几种方法&lt;/title&gt;		&lt;link rel="stylesheet" href="css/rest.css" /&g

			
		

	





	

		

			

				
					
js append

				
			

			

				

					zjutke的专栏
				

				

					09-11
					
					1306
					
				

			

		

		

			
				
function paytypeBl(){
$("#addspan").empty();
var fkfs=$("#fkfs ").val();
if(fkfs=='1'||fkfs=='2'||fkfs=='6'){
$("#addspan").append("%");
}
if(fkfs=='3'||fkfs=='4'||fkfs=='5'){
$("#addspan").app

			
		

	



		

			
		



	

		

			

				
					
js ::after简单实战

					
最新发布

				
			

			

				

					wnk1997的博客
				

				

					11-21
					
					1550
					
				

			

		

		

			
				
工作中遇到了一个表格，鼠标指到单元格要有个整行编辑态的效果，下面写个简单的demo。::after的作用是在元素后面再加个XXX样式。

			
		

	





	

		

			

				
					
JS追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）

					
热门推荐

				
			

			

				

					K1nney的博客
				

				

					10-16
					
					1万+
					
				

			

		

		

			
				
append(),在父级最后追加一个子元素
appendTo(),将子元素追加到父级的最后
prepend(),在父级最前面追加一个子元素
prependTo(),将子元素追加到父级的最前面
after(),在当前元素之后追加（是同级关系）
before(),在当前元素之前追加（是同级关系）
insertAfter(),将元素追加到指定对象的后面（是同级关系）
insertBefore(),将元素...

			
		

	





	

		

			

				
					
jQuery中append、insertBefore、after与insertAfter方法注意事项

				
			

			

				

					10-28
				

			

		

		

			
				
在使用jQuery进行DOM操作时，append、prepend、before和after方法是经常使用的，它们可以帮助开发者以不同的方式动态地修改页面内容。同时，appendTo、prependTo、insertBefore和insertAfter则是对应的以元素为目标...

			
		

	





	

		

			

				
					
jquery 追加元素append、prepend、before、after用法与区别分析

				
			

			

				

					11-29
				

			

		

		

			
				
本文将详细解析`append()`、`prepend()`、`before()`、`after()`以及它们对应的`insertAfter()`和`insertBefore()`方法的用法和区别。  1. `after()`与`before()`方法： `after()`方法用于在选定的jQuery对象后面...

			
		

	





	

		

			

				
					
jQuery添加新内容的四个常用方法分析【append，prepend，after，before】

				
			

			

				

					10-17
				

			

		

		

			
				
总的来说，了解并熟练掌握`append()`、`prepend()`、`after()`和`before()`这些jQuery方法，对于进行网页动态内容管理是非常重要的。通过合理运用这些方法，开发者可以轻松地实现元素的增删改，提高网页的交互性和...

			
		

	





	

		

			

				
					
javascript插入before(),after()新DOM方法

				
			

			

				

					dianmo5898的博客
				

				

					09-28
					
					1072
					
				

			

		

		

			
				
随着web的技术突飞猛进的发展。HTML5 ES6等新技术的发展，与此同时DOM等标准也在悄悄的进步，各大浏览器也在悄悄的发展适配新的属性和方法，今天我们来看看Javascript新的DOM的方法
二、before(),after(),prepend(),append()等新增DOM
before()

before()是个ChildNode方法，也就是节点方法。节点方法对应于...

			
		

	





	

		

			

				
					
js获得元素的:after节点

				
			

			

				

					小墨蛇的博客
				

				

					05-24
					
					1669
					
				

			

		

		

			
				
JS无法直接获取元素的:after伪元素节点，因为它不是DOM节点。但是可以使用getComputedStyle方法获取元素的样式，进而获取:after伪元素的内容。

			
		

	





	

		

			

				
					
JS 封装inserAfter()方法

				
			

			

				

					m0_47071530的博客
				

				

					04-27
					
					432
					
				

			

		

		

			
				
封装insertAfter()方法
在JS中，系统提供了Node.insertBefore(a, b)方法，在参考节点b之前插入一个拥有指定父节点Node的子节点a。
我们可以封装一个类似insertBefore()的函数 inertAfter(a, b)，实现在参考节点b之后插入一个拥有指定父节点Node的子节点a。
思路：获取参考节点afterNode的下一个元素节点，利用insertBefo...

			
		

	





	

		

			

				
					
js之append元素事件绑定

				
			

			

				

					夜行者的博客
				

				

					02-18
					
					2383
					
				

			

		

		

			
				
一直没写过js前端原生js和jquery的东西，是因为原生的js它是弱类型语言，也就意味着他的扩展性很强，开发人员可以有比较大的发挥空间，但是对于规范性的要求就比较下，比如函数接受的参数类型我们不需要去指定，代码结尾的分号没有也不会影响编译运行，不像强类型语言java等对格式有严格要求。

    这篇文章我们主要来了解一下前端对于一个dom元素在append元素的时候如何给append的元素添加事件，众所周知，给dom元素添加事件，需要在dom元素渲染完成之后，我们利用bind函数进行事件绑定，以...

			
		

	





	

		

			

				
					
简述JS中after方法与insertAfter方法的区分

				
			

			

				

					飞翔的企鹅的博客
				

				

					11-09
					
					1731
					
				

			

		

		

			
				
介绍

after()
			向每个匹配的元素后插入内容
		insertAfter()
			将匹配的元素插入到另一个指定的元素后面
		注意：after方法是在指定元素外部的末尾添加元素，而上篇博客中介绍的append方法则是在指定元素内部末尾添加元素。

区分

1、after()


<!DOCTYPE html>
<html>
    <head>
	...

			
		

	





	

		

			

				
					
如何在js中调用append里面点击标签变化的函数

				
			

			

				

					Dean_kai的博客
				

				

					10-21
					
					2048
					
				

			

		

		

			
				
在html中可以直接点击标签li，在加入如下代码
$(".dev_topcoli").click(function(){
  if($(this).find("img").attr('src')=='images/light_a.png'){
  $(this).find("img").attr('src',"images/light_b.png");
  }
  else{
   $(this

			
		

	





	

		

			

				
					
before()、after()等新增DOM API

				
			

			

				

					meng12_的博客
				

				

					10-20
					
					629
					
				

			

		

		

			
				
before()是个ChildNode方法，也就是节点方法。节点方法对应于元素方法。区别在于，节点可以直接是文本节点，甚至注释等。但是，元素必须要有HTML标签。
语法如下：

void ChildNode.before((节点或字符串)... 其它更多节点);
先来看一个最简单例子，已知HTML如下：



如果我们希望在图片前面插入写文字，直接可以：


document

			
		

	





	

		

			

				
					
js追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）...

				
			

			

				

					weixin_33979203的博客
				

				

					05-05
					
					6673
					
				

			

		

		

			
				
[html]view plaincopy<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>js中常用追加元素的几种方法</title><linkrel="s...

			
		

	





	

		

			

				
					
JavaScript前端中的伪类元素before和after使用详解

				
			

			

				

					qq_38334677的博客
				

				

					02-22
					
					4254
					
				

			

		

		

			
				
在前端开发中，伪类是一种让你可以选择元素的某个状态或位置的 CSS 选择器。其中，:before和:after伪类允许你在一个元素之前或之后插入内容。:before和:after伪类创建的元素是不在 HTML 文档中的，它们是通过 CSS 生成的。可以用它们来在一个元素的前面或后面插入一些内容，这些内容可以是文本、图像或者其他任何可以用 CSS 生成的内容。伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。

			
		

	





	

		

			

				
					
jQuery DOM操作：append、prepend、before、after与insert方法解析

				
			

			

				

					
				

			

		

		

			
				
本文主要介绍了jQuery中用于追加元素的四个关键方法：after(), before(), append() 和 prepend()，以及它们对应的反向操作方法insertAfter()和insertBefore()，并详细解析了它们的用法和区别。  在jQuery中，after()...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值