Javascript 如何删除页面上不需要的HTML标记？

我对这段代码有问题。当我点击它一次时，一切都很好，行为也符合设计，但当我点击它多次时，就会在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:

---

这里是实时的

主要问题是每次都使用innerHTML属性而不是.textContent属性

以下是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++;
    };
}

---

您的解决方案是否要求将其放回具有相同id的同一div中，或者您是否可以删除该div并添加另一个具有不同id的div？您是否理解为什么使用.textContent会有所不同？

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++;
    };
}