前端开发中最常用到的追加模块的方法:(jquery提供的)append()和html()。
两者区别为:
html():将一整个模块添加到指定位置,不可多次执行添加。(若多次使用最终保留最后添加的模块)
append():将模块依次追加到指定位置,可多次执行添加不同模块,对应模块会一直向后累加。
具体代码和示例如下:
1、html()方法:
$(function(){
var str = '';
var str1 = '';
str += '<h4>第一部分</h4>';
for(var i=0;i<3;i++){
str += ''
+'<p style="color:#f00;">追加的元素'+i+'</p>';
}
$("#root").html(str);
str1 += '<h4>第二部分</h4>';
for(var i=0;i<3;i++){
str1 += ''
+'<p style="color:#00f;">追加的元素'+i+'</p>';
}
$("#root").html(str1);
});
可以看出,虽然执行了两次方法添加了两个不同的模块,但最终只保留了最后一个。
2、append()方法:
$(function(){
var str = '';
var str1 = '';
str += '<h4>第一部分</h4>';
for(var i=0;i<3;i++){
str += ''
+'<p style="color:#f00;">追加的元素'+i+'</p>';
}
$("#root").append(str);
str1 += '<h4>第二部分</h4>';
for(var i=0;i<3;i++){
str1 += ''
+'<p style="color:#00f;">追加的元素'+i+'</p>';
}
$("#root").append(str1);
});
使用append()则可以追加多个模块。
需要注意,append()方法必须写在循环外,否则会出现如下情况:
$(function(){
var str = '';
var str1 = '';
str += '<h4>第一部分</h4>';
for(var i=0;i<3;i++){
str += ''
+'<p style="color:#f00;">追加的元素'+i+'</p>';
$("#root").append(str);
}
str1 += '<h4>第二部分</h4>';
for(var i=0;i<3;i++){
str1 += ''
+'<p style="color:#00f;">追加的元素'+i+'</p>';
}
$("#root").append(str1);
});