JavaScript动态添加图片。

在一段列表里，代码如下，我想动态地添加图片。js判断span后的日期，如果和今天的一致，就在 li下的a后（一周会议安排（4月22日））添加一个图片提示当天增加的内容，如何实现？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
.li_title {            list-style-type:none;    font-size:12px;
   line-height:24px;
   
   }
.date {float:right;margin-right:3px;}
  </style>
 </HEAD> <BODY>
  <DIV id=Conttab_p_switch1 style="POSITION: relative">
<UL>
 <LI class="li_title"><span class="date">2011-04-22</span><A title=一周会议安排（4月22日） href="#" target=_blank>一周会议安排（4月22日）</A></LI> 
 <LI class="li_title"><span class="date">2011-04-11</span><A title=一周会议安排（4月11日） href="#" target=_blank>一周会议安排（4月11日）</A></LI> 
 <LI class="li_title"><span class="date">2011-04-04</span><A title=一周会议安排（4月04日） href="#" target=_blank>一周会议安排（4月04日）</A></LI> 
   
 </UL>
  </DIV>
 </BODY>
</HTML>

解决方案 »

  1.   

      $("#Conttab_p_switch1>ul>li").each(function(){
         var sDate = $(this).children("a").text();
         sDate = sDate.split("（")[1];
         sDate = sDate.split("）")[0];
         var now= new Date();
         var   sNow = now.getMonth()+1+"月"+now.getDate()+"日";
     
         if(sDate === sNow){ 
           var img = new Image();
           img.src = "http://www.hao123.com/images/logo_193.png?v=201104061200";
           $(this).append(img);
         }
     });
      

  2.   

    可以不用JQ
    选择器用JS的就好了
      

  3.   


    $("#Conttab_p_switch1>ul>li").each(function(){ //选择器找到你的div>ul>li
      var sDate = $(this).children("a").text();//取出标签a中的文本并赋值给sDate 既"一周会议安排（4月22日）"
      sDate = sDate.split("（")[1];//从左括号(处提取文本并将第二个赋值给sDate既"4月22日）"
      sDate = sDate.split("）")[0];//从右括号)除提取文本并将第一个赋值给sDate既"4月22日"
      var now= new Date();//now为今天日期
      var sNow = now.getMonth()+1+"月"+now.getDate()+"日";//取出今天日期的月和日 并生成为"m月d日"
     
      if(sDate === sNow){ 
      var img = new Image();
      img.src = "http://www.hao123.com/images/logo_193.png?v=201104061200";
      $(this).append(img);
      }
     });
      

  4.   

    我慢慢看也懂，但是，我运行，就是没有出那个图片啊？
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
      <script type="text/javascript">
      $("#Conttab_p_switch1>ul>li").each(function(){
      var sDate = $(this).children("a").text();
      sDate = sDate.split("（")[1];
      sDate = sDate.split("）")[0];
      var now= new Date();
      var sNow = now.getMonth()+1+"月"+now.getDate()+"日";
      
      if(sDate === sNow){  
      var img = new Image();
      img.src = "http://www.hao123.com/images/logo_193.png?v=201104061200";
      $(this).append(img);
      }
     });  </script>
      <style type="text/css">
    .li_title {            list-style-type:none;
                           background:url(image/xe1.gif) no-repeat left center;
                           padding-left:12px;
       font-size:12px;
       line-height:24px;
       
       }
    .date {float:right;margin-right:3px;}
      </style>
     </HEAD> <BODY>
      <DIV id=Conttab_p_switch1 style="POSITION: relative">
    <UL>
     <LI class="li_title"><span class="date">2011-04-22</span><A title=一周会议安排（4月22日） href="#" target=_blank>一周会议安排（4月22日）</A></LI> 
     <LI class="li_title"><span class="date">2011-04-11</span><A title=一周会议安排（4月11日） href="#" target=_blank>一周会议安排（4月11日）</A></LI> 
     <LI class="li_title"><span class="date">2011-04-04</span><A title=一周会议安排（4月04日） href="#" target=_blank>一周会议安排（4月04日）</A></LI> 
     <LI class="li_title"><span class="date">2011-03-28</span><A title=一周会议安排（3月28日） href="#" target=_blank>一周会议安排（3月28日）</A></LI> 
     <LI class="li_title"><span class="date">2011-03-21</span><A title=一周会议安排（3月21日） href="#" target=_blank>一周会议安排（3月21日）</A></LI> 
     <LI class="li_title"><span class="date">2011-03-14</span><A title=一周会议安排（3月14日） href="#" target=_blank>一周会议安排（3月14日）</A></LI> 
     <LI class="li_title"><span class="date">2011-03-07</span><A title=一周会议安排（3月07日） href="#" target=_blank>一周会议安排（3月07日）</A></LI> 
     <LI class="li_title"><span class="date">2011-02-28</span><A title=一周会议安排（2月28日） href="#" target=_blank>一周会议安排（2月28日）</A></LI>     
     </UL>
      </DIV> </BODY>
    </HTML>
      

  5.   


    <DIV id=Conttab_p_switch1 style="POSITION: relative">
    仔细看看你少了什么?Conttab_p_switch1要加引号!
      

  6.   


    我加了 <DIV id="Conttab_p_switch1" style="POSITION: relative">这样好像也不行啊。
      

  7.   


    $(document).ready(
    //Jquery代码
    )
      

  8.   


      <script language="JavaScript" type="text/javascript">
    $(document).ready(function (){
      var s=document.getElementById("Conttab_p_switch1")
      alert(s)
    $("#Conttab_p_switch1>ul>li").each(function(){
      var sDate = $(this).children("a").text();
      
      sDate = sDate.split("（")[1];
      alert(sDate)
      sDate = sDate.split("）")[0];
      alert(sDate)
      var now= new Date();
      var sNow = now.getMonth()+1+"月"+now.getDate()+"日";
     
      if(sDate === sNow){ 
      var img = new Image();
      img.src = "http://www.hao123.com/images/logo_193.png?v=201104061200";
      $(this).append(img);
      }
     });
      })
      </script>
      

  9.   

    $(document).ready(
    //这个是JQ在页面加载完成后调用的方法
    )
      

  10.   

    我知道了。你的那个$(document).ready(
    //这个是JQ在页面加载完成后调用的方法
    )
    还要加上function() {}，我加上就可以了。
      

  11.   

    但是，样式上还有一点问题。span里的时间动态变化了，位置不对。
      

  12.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <style type="text/css">
    .li_title {            list-style-type:none;                       font-size:12px;
                           line-height:24px;
                           
                           }
    .date {float:right;margin-right:3px;}
      </style>
     </HEAD> <BODY>
      <DIV id=Conttab_p_switch1 style="POSITION: relative">
                <UL>
                         <LI class="li_title"><span class="date">2011-04-22</span><A title=一周会议安排（4月22日） href="#" target=_blank>一周会议安排（4月22日）</A></LI> 
                         <LI class="li_title"><span class="date">2011-04-11</span><A title=一周会议安排（4月11日） href="#" target=_blank>一周会议安排（4月11日）</A></LI> 
                         <LI class="li_title"><span class="date">2011-04-04</span><A title=一周会议安排（4月04日） href="#" target=_blank>一周会议安排（4月04日）</A></LI> 
                                                              
                 </UL>
          </DIV>
         <script>
         window.onload = function(){
             var  lis = document.getElementById("Conttab_p_switch1").getElementsByTagName("li");
                var now = new Date();
                for(var i = 0 ;i<lis.length ;i++){  
                    var arr = lis[i].childNodes[0].innerHTML.split("-");
                    var t = new Date(arr[0],parseInt(arr[1])-1,arr[2]);
                    if(now.getFullYear()==t.getFullYear()&&now.getMonth()==t.getMonth()&&now.getDate()==t.getDate()){
                        var img = "<img src='http://avatar.profile.csdn.net/0/8/9/2_zell419.jpg'/>";
                        lis[i].innerHTML+=img;
                    }
                }
         }
         </script>
     </BODY>
    </HTML>看看行不 。
      

  13.   

    to zell419
    恩。你这个很好，符合我的要求，我本来就想按照span里来判断日期的，除了那个在ie6表现的样式不对外，其他都不错。谢谢了。可惜我已结贴了。