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

最新推荐文章于 2025-05-28 15:23:10 发布

原创最新推荐文章于 2025-05-28 15:23:10 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#join #string #input #date #button #function

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文通过实验对比了三种不同的DOM操作方法：使用appendChild、修改innerHTML以及使用join+innerHTML的方法，并记录了每种方法所需的时间。实验结果显示，使用join+innerHTML的方法在性能上表现最优。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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来实现，所耗时间最少。