JS动态添加html标签

2019-05-02  本文已影响0人  蜗牛呀呀呀呀呀

1.用JS向html中添加标签

        <script>
            function shen(obj) {
                var aa=obj.innerHTML;
                $.post('./index.php?i=1&c=entry&m=ewei_shopv2&do=area', {provice: aa}, function(obj) {
                    var region = eval('(' + obj + ')');
                    var div = document.getElementById("city");//这个是要在其中添加便签
                    var b = region.length;//获取返回数据有几条
                    div.innerHTML = "";//这个不明白,反正写就对了
                    for(a = 0; a <= b; a++) {       //循环增加标签                
                        var div1 = document.createElement('div');//此处增加div
                        var p1 = document.createElement("p");   //此处增加p                 
                        div1.className = "cityOne";//给新增的div1加入class值
                        p1.className = "title";//给新增的p1加入class值
                        div1.style.marginLeft="3%";//增加style
                        p1.style.fontSize="7px";
                        if(region[a]['cishu']==null){
                            region[a]['cishu']=0;
                        }//实际情况需要进行改值。
                        p1.innerHTML = region[a]['region_name'] + region[a]['cishu']+"所";//给p1增加内容
                        div1.appendChild(p1);   //p1属于div1              
                        div.appendChild(div1);//div1属于div
                    }

                });
            }
        </script>

解释说明:这里用post向php发出请求,然后obj的到返回的json值。

var region = eval('(' + obj + ')');//作用是将php传出的数据转化成js能够读懂的方式
根据项目需要还要加入<a></a>元素。当时没想出来,就找了JQ进行加入。现在想想应该是:
var a1 = document.createElement("a");
a1.href="url";
a1.appendChild(div1);

2用JQ向html中添加标签。

<script>
            function shen(obj) {
                var aa=obj.innerHTML;
                $.post('./index.php?i=1&c=entry&m=ewei_shopv2&do=area', {provice: aa}, function(obj) {
                    var region = eval('(' + obj + ')');
                    var div = document.getElementById("city");
                    var b = region.length;
                    div.innerHTML = "";
                    for(a = 0; a <= b; a++) {
                        if(region[a]['cishu']==null){
                            region[a]['cishu']=0;
                        }
                        
                        var name=region[a]['region_name'];
                        var cishu=region[a]['cishu'];
                        var ul="./index.php?i=1&c=entry&m=ewei_shopv2&do=quyu&area="+name;
                        var div1='<a href="'+ul+'"><div class="cityOne" style="margin-left:3%"> <p class="title" style="font-size:7px;">'+name+cishu+'位</p></div></a>';

                        $('#city').append(div1);//新建的div1处于id为city的标签中。
                }

                });
            }
        </script>

总结:JQ比JS更加简单,从某种程度上来讲,就是相当于直接写html,根据自己的爱好选择吧

上一篇下一篇

猜你喜欢

热点阅读