前端页面追加模块jquery实现

前端开发中最常用到的追加模块的方法：（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);
});