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

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

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

transcriptText.appendChild(newSpan);

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