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>