您的位置：首页 > 移动开发

appendChild、拼接string、join三种方式比较字符串拼接

2012-02-29 15:50 435 查看

function Append() {
var n = parseInt(document.getElementById("tbTimes").value);
var content = document.getElementById("tbContent").value;
var startTime = (new Date()).getTime();
var div = document.getElementById("divContent");
div.innerHTML = "";
for (var i = 0; i < n; i++) {
var item = document.createElement("span");
item.appendChild(document.createTextNode(content));
div.appendChild(item);
}
var endTime = (new Date()).getTime();
document.getElementById("tbTime").value = endTime - startTime;
}

function InnerHtml() {
var n = parseInt(document.getElementById("tbTimes").value);
var content = document.getElementById("tbContent").value;
var startTime = (new Date()).getTime();
var div = document.getElementById("divContent");
div.innerHTML = "";
for (var i = 0; i < n; i++) {
div.innerHTML += "<span>" + content + "</span>";
}
var endTime = (new Date()).getTime();
document.getElementById("tbTime").value = endTime - startTime;
}

function JoinInnerHtml() {
var n = parseInt(document.getElementById("tbTimes").value);
var content = document.getElementById("tbContent").value;
var startTime = (new Date()).getTime();
var div = document.getElementById("divContent");
div.innerHTML = "";
var result = [];
//var result = "";
for (var i = 0; i < n; i++) {
result.push("<span>" + content + "</span>");
//result += "<span>" + content + "</span>";
}
div.innerHTML = result.join("");
//div.innerHTML = result;
var endTime = (new Date()).getTime();
document.getElementById("tbTime").value = endTime - startTime;
}

<body>
内容<input id="tbContent" type="text" value=" [Hello World] " /><br />
次数<input id="tbTimes" type="text" value="1000" /><br />
耗时<input id="tbTime" type="text" /><br />
<input type="button" value="appendChild" onclick="Append()"/>
<input type="button" value="innerHTML" onclick="InnerHtml()" />
<input type="button" value="join+innerHTML" onclick="JoinInnerHtml()" /> 
<div id="divContent"> </div>
</body>

通过实验，用第三种join来实现，所耗时间最少。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： join string input date button function

相关文章推荐

新的分享

章节导航