Jquery学习appendTo和after区别和应用

appendTo(content)解释为：

把所有匹配的元素追加到另一个指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

 

Api上的例子:

HTML 代码:
<p>I would like to say: </p>
<div></div><div></div>
jQuery 代码:
$("p").appendTo("div");
结果:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

实际应用：

   <s:iterator value="classGradeList">
    $("<option>"+"<s:property value='gradeName' />"+"</option>").appendTo("#gradeId").val("<s:property value='gradeId' />");
         </s:iterator>

上面是用到了struts2，classGradeList为后台返回的一个list集合，里面含有两个属性'gradeName' ，和gradeId。得到结果则为后台返回的所有学年度的下拉框。

 

 

after(content)解释

在每个匹配的元素之后插入内容。

API例子:

HTML 代码:

<p>I would like to say: </p>

jQuery 代码:

$("p").after("<b>Hello</b>");

结果:

<p>I would like to say: </p><b>Hello</b>

 

实际应用：

$.ajax({
   url:"/school_class/studentInfoAction_validatorCode.action?studentInfoVo.studentNo="+$("#studentNo").val()+"&studentInfoVo.studentinfoId="+$("#id").val(),
   type:"post",
   async:false,
   timeout:3000,
   success:function(html) {
    resultMess=html;
    if(html==""){
         $("#studentNoMess").after("<span id='loadmsg' style='color: green'>可以使用</span>");
        $("#allow").show();
    }else{
        $("#studentNo").focus();
    }
   } 
  });

页面中有个div 它的Id为studentNoMess，功能是检查学号是否有重复的例子。

评论

2 楼 lian8306 2011-11-17  

一个是在所加元素内部，一个是外部

1 楼 jersey109 2011-10-13  

没懂,append和after的区别到底在哪里,两个都是追加到目标的结尾啊