如何刪除頁面上不需要的HTML標記？

Question

我對這段代碼有麻煩。 當我單擊一次時，一切都很好，並且行為是按設計的，但是當我單擊不止一次時，那么div（文本區域）中會出現所有HTML。 我應該如何修改我的JS使其不發生？

HTML：

<div id="transcriptText">Lorem ipsum dolor sit amet </div>
<br>
<div id="divideTranscript" class="button">&nbsp;Transform the Transcript!&nbsp;</div>

JS：

    window.onload = function() {

var transcriptText = document.getElementById("transcriptText");
var newTranscript = document.createElement("div");
var divideTranscript = document.getElementById("divideTranscript");
divideTranscript.onclick = EventHandler;

function EventHandler() {
    changeText();
}

function changeText() {
    var sArr = transcriptText.innerHTML.split(" ");
    transcriptText.innerHTML = "";
    console.log(sArr);
    var count = 0;

    for (var i = 0; i < sArr.length; i++) {
        var item = sArr[i];
        var newSpan = document.createElement("span");
        var newText = document.createTextNode(item);
        var dotNode = document.createTextNode(" ");

        newSpan.id = "word" + i;
        var mouseOverFunction = function () {
            this.style.backgroundColor = 'yellow';
        };
        newSpan.onmouseover = mouseOverFunction;

        var mouseOutFunction = function () {
            this.style.backgroundColor = '';
        };
        newSpan.onmouseout = mouseOutFunction;
        newSpan.appendChild(newText);
        newSpan.appendChild(dotNode);
        transcriptText.appendChild(newSpan);
        count++;
    };
}
};

這是現場直播http://jsfiddle.net/b94DG/1/

Answer 1

主要問題是您每次都使用innerHTML屬性而不是.textContent屬性。

這是changeText()的改進版本， changeText()運行多少次無關緊要：

function changeText() {
    var sArr = transcriptText.textContent.split(/\s+/g); // changed
    transcriptText.innerHTML = "";
    var count = 0;

    for (var i = 0; i < sArr.length; i++) {
        var item = sArr[i];
        if (!item) continue; // changed: don't add spans for empty strings
        var newSpan = document.createElement("span");
        var newText = document.createTextNode(item);
        var dotNode = document.createTextNode(" ");

        newSpan.id = "word" + i;
        var mouseOverFunction = function () {
            this.style.backgroundColor = 'yellow'; 
        };
        newSpan.onmouseover = mouseOverFunction;

        var mouseOutFunction = function () {
            this.style.backgroundColor = '';
        };
        newSpan.onmouseout = mouseOutFunction;
        newSpan.appendChild(newText);
        newSpan.appendChild(dotNode);
        transcriptText.appendChild(newSpan);
        count++;
    };
}