JQuery之------append，appendTo，prepend，prependTo，after，before等方法详解

@参考文档：http://www.cnblogs.com/mengdd/p/4229490.html

<style type="text/css">

　　...下边动态添加的标签元素的样式写在这里边，这里省略。

</style>

$.ajax({
            type:"get",
            async:false,
            url:'http://api.map.baidu.com/telematics/v3/weather?location=%e5%91%a8%e5%8f%a3&output=json&ak=kGGYIYTmRVQOWPUjgk3w7QZ1',   //获取百度车联网天气json数据。
            dataType:"jsonp",
            success:function(json){
                //alert(json);
                $(".container").append('<br/><h4 class="wethercity">河南&nbsp;&nbsp;&nbsp;&nbsp;'+json.results[0].currentCity+'</h4>'+
                '<div class="wetherdetail">'+   //JavaScript字符串拼接用+号。
                   ' <strong id="temperature">'+json.results[0].weather_data[0].temperature+'</strong><span id="weathertype">'+json.results[0].weather_data[0].weather+'</span>'+
                    '<ul style="padding-left:0;">'+
                        '<li class="txt-r"><span id="winddir">'+'PM2.5指数:'+json.results[0].pm25+'</span> <i class="icon-feng"></i><span id="windpower">'+json.results[0].weather_data[0].wind+'</span></li>'+
                    '</ul>'+
                '</div><br/>'+
                '<div class="morewether">'+
                    '<ul id="foreast">'+
                        '<li><p class="colora">今天 '+json.results[0].weather_data[0].date.substring(3,9)+'</p><p class="icon-tu"><i class="icon-xiaoyu" style="background: rgba(0, 0, 0, 0) url('+json.results[0].weather_data[0].dayPictureUrl+') no-repeat scroll 0 0;display: inline-block;height:30px;width:42px;margin-bottom:5px;"></i><br>'+json.results[0].weather_data[0].weather+'</p><p class="otherinfo"><span>'+json.results[0].weather_data[0].temperature+'</span>'+json.results[0].weather_data[0].wind+'</p></li>'+
                        '<li><p class="colora">明天 '+json.results[0].weather_data[1].date+'</p><p class="icon-tu"><i class="icon-xiaoyu" style="background: rgba(0, 0, 0, 0) url('+json.results[0].weather_data[1].dayPictureUrl+') no-repeat scroll 0 0;display: inline-block;height:30px;width:42px;margin-bottom:5px;"></i><br>'+json.results[0].weather_data[1].weather+'</p><p class="otherinfo"><span>'+json.results[0].weather_data[1].temperature+'</span>'+json.results[0].weather_data[1].wind+'</p></li>'+
                        '<li><p class="colora">后天 '+json.results[0].weather_data[2].date+'</p><p class="icon-tu"><i class="icon-qing" style="background: rgba(0, 0, 0, 0) url('+json.results[0].weather_data[2].dayPictureUrl+') no-repeat scroll 0 0;display: inline-block;height:30px;width:42px;margin-bottom:5px;"></i><br>'+json.results[0].weather_data[2].weather+'</p><p class="otherinfo"><span>'+json.results[0].weather_data[2].temperature+'</span>'+json.results[0].weather_data[2].wind+'</p></li>'+
                        '<li><p class="colora">'+json.results[0].weather_data[3].date+'</p><p class="icon-tu"><i class="icon-qing" style="background: rgba(0, 0, 0, 0) url('+json.results[0].weather_data[3].dayPictureUrl+') no-repeat scroll 0 0;display: inline-block;height:30px;width:42px;margin-bottom:5px;"></i><br>'+json.results[0].weather_data[3].weather+'</p><p class="otherinfo"><span>'+json.results[0].weather_data[3].temperature+'</span>'+json.results[0].weather_data[3].wind+'</p></li>'+
                '</div>'+
                '<h4 style="clear:both;color:#fff;padding-top:10px;font-size:28px;">生活指数</h4>'+
                '<div class="morewether2">'+
                    '<ul id="foreast">'+
                        '<li style="padding-left:0;margin-left:0;"><div style="float:left;margin-top:20px;"><i style="background: rgba(0, 0, 0, 0) url(images/chuanyi.png) no-repeat scroll 0 0;display: inline-block;height:63px;width:54px;margin-bottom:5px;"></i><p class="colora">'+json.results[0].index[0].tipt+'</p></div><div style="margin-top:10px;"><h1>'+json.results[0].index[0].zs+'</h1><h5 style="text-align:left;"><span>&nbsp;&nbsp;&nbsp;&nbsp;'+json.results[0].index[0].des+'</span></h5></div></li>'+
                        '<li style="padding-left:0;"><div style="float:left;margin-top:20px;"><i style="background: rgba(0, 0, 0, 0) url(images/xiche.png) no-repeat scroll 0 0;display: inline-block;height:63px;width:54px;margin-bottom:5px;"></i><p class="colora">'+json.results[0].index[1].tipt+'</p></div><div style="margin-top:10px;"><h1>'+json.results[0].index[1].zs+'</h1><h5 style="text-align:left;"><span>&nbsp;&nbsp;&nbsp;&nbsp;'+json.results[0].index[1].des+'</span></h5></div></li>'+
                        '<li style="padding-left:0;"><div style="float:left;margin-top:20px;"><i style="background: rgba(0, 0, 0, 0) url(images/lvyou.png) no-repeat scroll 0 0;display: inline-block;height:63px;width:54px;margin-bottom:5px;"></i><p class="colora">'+json.results[0].index[2].tipt+'</p></div><div style="margin-top:10px;"><h1>'+json.results[0].index[2].zs+'</h1><h5 style="text-align:left;"><span>&nbsp;&nbsp;&nbsp;&nbsp;'+json.results[0].index[2].des+'</span></h5></div></li>'+
                        '<li style="padding-left:0;margin-left:0;"><div style="float:left;margin-top:20px;"><i style="background: rgba(0, 0, 0, 0) url(images/ganmao.png) no-repeat scroll 0 0;display: inline-block;height:63px;width:54px;margin-bottom:5px;"></i><p class="colora">'+json.results[0].index[3].tipt+'</p></div><div style="margin-top:10px;"><h1>'+json.results[0].index[3].zs+'</h1><h5 style="text-align:left;"><span>&nbsp;&nbsp;&nbsp;&nbsp;'+json.results[0].index[3].des+'</span></h5></div></li>'+
                        '<li style="padding-left:0;"><div style="float:left;margin-top:20px;"><i style="background: rgba(0, 0, 0, 0) url(images/yundong.png) no-repeat scroll 0 0;display: inline-block;height:63px;width:54px;margin-bottom:5px;"></i><p class="colora">'+json.results[0].index[4].tipt+'</p></div><div style="margin-top:10px;"><h1>'+json.results[0].index[4].zs+'</h1><h5 style="text-align:left;"><span>&nbsp;&nbsp;&nbsp;&nbsp;'+json.results[0].index[4].des+'</span></h5></div></li>'+
                        '<li style="padding-left:0;"><div style="float:left;margin-top:20px;"><i style="background: rgba(0, 0, 0, 0) url(images/uv.png) no-repeat scroll 0 0;display: inline-block;height:63px;width:54px;margin-bottom:5px;"></i><p class="colora">'+json.results[0].index[5].tipt+'</p></div><div style="margin-top:10px;"><h1>'+json.results[0].index[5].zs+'</h1><h5 style="text-align:left;"><span>&nbsp;&nbsp;&nbsp;&nbsp;'+json.results[0].index[5].des+'</span></h5></div></li>'+
                '</div>');
            },
            error:function(){
                alert("fail");
            }
        });

---参考文档网页切图