如何更改DIV中的文本内容(使用DOM）以添加SPAN元素

How to change text content in DIV (with DOM) to add SPANs elements instead?

本文关键字：DOM 使用 添加 元素 SPAN DIV 何更改 文本      更新时间：2023-09-26

我对如何使用DOM更改div的文本内容感到困惑。当事件被触发时，我看到新的文本替换了旧的，但它在一个新的div中。我想把它保留在"transcriptText"中以保留所有属性`我该怎么做？

这是我的旧div，里面有文本：

var transcriptText = document.getElementById("transcriptText");

这些是我的新文本SPAN元素

var newTranscript = document.createElement("div");

这就是我处理事件的方式

function EventHandler() {
    transcriptText.parentNode.replaceChild(newTranscript, transcriptText);
    }

以下是关于其当前工作方式的JSFiddle：http://jsfiddle.net/b94DG/

您现在要做的是创建一个新的div，newTranscript，它是通过在旧文本的基础上添加一组跨度来创建的。然后在事件处理程序中，用新的处理程序替换旧的处理程序。相反，您仍然可以从旧的文本中复制文本，但随后将其清除并将子项附加到旧的div上，将第36行替换为：

transcriptText.appendChild(newSpan);

要清除旧元素，只需将innerHTML设置为""即可，或者如果需要，可以使用removeChild删除所有子元素，如中所述https://developer.mozilla.org/en-US/docs/Web/API/Node.removeChild

编辑：

我修改了你的小提琴以反映这一点：

http://jsfiddle.net/b94DG/1/

您可以更改transcriptText的innerHTML，而不是创建新的div。

var transcriptText = document.getElementById("transcriptText");
var divideTranscript = document.getElementById("divideTranscript");
divideTranscript.onclick = function() {
    var sArr = transcriptText.innerHTML.split(" ");
    var newInnerHTML = "";
    for (var i = 0; i < sArr.length; i++) {
        var item = sArr[i];
        var newText = "<span class='highlight' id='word" + i + "'>" + item + " </span>";
        newInnerHTML += newText;
    }
    transcriptText.innerHTML = newInnerHTML;
    var mouseOverFunction = function () {
        this.style.backgroundColor = 'yellow';
    };
    var mouseOutFunction = function () {
        this.style.backgroundColor = '';
    };
    var highlight = document.getElementsByClassName("highlight");
    for (i = 0; i < highlight.length; i++) {
        highlight[i].onmouseover = mouseOverFunction;
        highlight[i].onmouseout = mouseOutFunction;
    }
};

小提琴在这儿：http://jsfiddle.net/khnGN/

相关文章：