Как изменить текстовое содержимое в DIV (с DOM), чтобы вместо него добавить элементы SPAN?

Question

Как изменить текстовое содержимое в DIV (с DOM), чтобы вместо него добавить элементы SPAN?

0

Я смущен тем, как изменить текстовое содержимое div с помощью DOM. Когда событие срабатывает, я вижу, что новый текст заменяет старый, но он находится в новом 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/

user3529194 14 апр. 2014, в 06:29

Источник

Теги:

javascript

html

2 ответа

0

Вы можете изменить innerHTML transcriptText вместо создания нового 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/

jyotesh 14 апр. 2014, в 03:17

Ещё вопросы

OldGeeksGuide · Accepted Answer · 2014-04-14T01-58-00.000Z

Теперь вы создаете новый 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/

Вау, большое спасибо за отзыв. Я не понимал, что я не очищаю старый div и не добавляю детей. Так много учиться ....