美文网首页
JS动态添加html标签

JS动态添加html标签

作者: 蜗牛呀呀呀呀呀 | 来源:发表于2019-05-02 17:27 被阅读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,根据自己的爱好选择吧

    相关文章

      网友评论

          本文标题:JS动态添加html标签

          本文链接:https://www.haomeiwen.com/subject/ckagcqtx.html