美文网首页
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标签

    1.用JS向html中添加标签 解释说明:这里用post向php发出请求,然后obj的到返回的json值。 根据项...

  • js中动态添加标签后的问题

    在实际开发中经常会遇到动态向html文档中添加标签的操作,这些动态添加的标签虽然有绑定好的事件或者js交互效果,可...

  • DOM操作

    js动态添加 动态添加标签 var domDiv = document.createElement('div');...

  • loading data dynamically and as

    .py .html .js 异步加载数据,动态追加元素到页面,动态生成html标签中的内容。好处:It just ...

  • js动态加载HTML元素时点击事件无效

    js动态加载HTML元素时点击事件无效: 是因为这些动态加载的这些HTML,是在css,js代码加载完后,再添加的...

  • 如何动态监听js动态添加的标签

    如何动态监听js动态添加的标签 问题$(function(){ //正常的监听事件 $(".input-s...

  • JS 导出table标签为excel

    js导出table标签为excel 添加依赖html底部添加依赖 js使用调用以下方法即可,其中.table 为t...

  • day_1_13 jsp&el&jstl

    JSP Java Server Page = html + java脚本 + jsp动态标签Jsp的执行流程:JS...

  • 前端学习存疑点整理

    和 属于HTML中的块标签,而CSS是美化HTML的 JS是用来实现网页动态交互的脚本语言所谓实现动态交互就是利用...

  • 2019-01-26

    js事件 HTML事件 直接在HTML元素标签内添加时间,执行脚本 语法:...

网友评论

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

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