jauery如何对append(innerHTML)的标签赋予样式?带超简单代码.

$("<div class='kkk'>bbccdd</div>").css("background-color","green").click(function(){
alert("点了kkk!") 
}).appendTo("#test");

解决方案 »

  1.   

    楼上这位老大
    如果有1000次 append呢?
    如果CSS样式有大概100行呢?我写的例子只写了一行css和一行click js方法.实际应用中有非常多内容.
      

  2.   

    function test(str, appendToElement)
    {
        $(str).css("background-color","green").click(function(){ 
       alert("点了kkk!") 
    }).appendTo(appendToElement);
    }
      

  3.   

    <HTML> 
    <HEAD> 
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"> </script> 
    <script> 
    $(function(){ 
    $(".kkk").css("background-color","green"); 
    $(".kkk").click(function(){ 
    alert("点了kkk!") 
    }); 
    }); var json={
       "class_a":{text:"测试4",evt:function(){alert(1)}},
       "class_b":{text:"测试5",evt:function(){alert(2)}},
       "class_c":{text:"测试6",evt:function(){alert(3)}},
       "class_d":{text:"测试7",evt:function(){alert(4)}}
       };function appendSpans(json){
      
      $.each(json,function(key,value){
        $("<span/>").attr("class",key).text(value.text).click(value.evt).appendTo($("#te"));
         
      });
      
    }
    </script> 
    </HEAD> 
    <BODY> 
    <span class="kkk">测试1 </span> <span class="kkk">测试2 </span> <span class="kkk">测试3 </span> 
    <div id="te"> </div> 
    <INPUT TYPE="button" value="加一个新的kkk" onclick="appendSpans(json)"> 
    </BODY> 
    </HTML> 
      

  4.   

    要写一个专用的append方法?没有简单的方式了吗?
      

  5.   

    你是一个button添加多个span,还是多个button没个都添加一个span?
      

  6.   

    是多个button,目前的样子是<INPUT TYPE="button" value="加一个新的kkk" onclick='$("#te").append("<b>fasdf</b><span class=\"kkk\">测试1 </span>1234566453453内容乱七八糟");'> 
    <INPUT TYPE="button" value="加一个新的kkk" onclick='$("#te").append("2323<span class=\"kkk\">测试2 </span>1234566乱七八糟");'> 
    <INPUT TYPE="button" value="加一个新的kkk" onclick='$("#te").append("23<span class=aaa>fadf</font>432<span class=\"kkk\">测试3 </span>12345663453内容乱七");'> 
    <INPUT TYPE="button" value="加一个新的kkk" onclick='$("#te").append("<span class=ddd>fasdf</font><span class=\"kkk\">测试4 </span>12345663453内容乱糟");'> 类似上面这样.混合其他html标签,载入(其他html标签也可能有相应的jquery定义)
    是不是我要写一个针对我应用单独的append方法?
      

  7.   

    <HTML> 
    <HEAD> 
    <script type="text/javascript" src="jquery-1.2.6.min.js"> </script> 
    <script> 
    var json={
       "buttonID1":{
            html:"<span ><b class=\"aaa\">fasdf </b>测试11234566453453内容乱七八糟</span>",//内容要在一个父元素下
            process:function(obj){
                obj.children(".aaa").css("background-color","red")}
        },
       "buttonID2":{
            html:"2323 <span ><span class=\"bbb\">测试2</span> 测试11234566453453内容乱七八糟</span>",
            process:function(obj){
                obj.children(".bbb").css("background-color","blue")}
        }
       };$.fn.extend({//添加自定义处理
       bindProcess:function(func){
            func($(this));
            return $(this);
       }
    });
    $(function(){
        $.each(json,function(buttonid,jsnObj){
            $("#"+buttonid).click(function(){
               $(jsnObj.html)
                .bindProcess(jsnObj.process)
                .appendTo($("#te"));
             });     
          });
    });
    </script> 
    </HEAD> 
    <BODY> 
    <div id="te"> </div> 
    <input type="button" id="buttonID1" value="btn1"/>
    <input type="button" id="buttonID2" value="btn1" />
    </BODY> 
    </HTML>