DOM Operation Unsuccessful - Show HTML in Element

Question

Working code here is mixed with non-working code. The code works up until the line where it commands the innerText to be of

x.innerHTML.substring(3,-3)

This is the function I am calling on a click EventListener for "click". It does go to the function, I do get the console.log appearance. I do not get the change in text from empty to String and nor does it show up in the coded_grove portion of the code.

function makeOverSetup(ev)
{
        document.getElementById("styleVals").value = ev.target.getAttribute("style")
        document.getElementById("thisClasses").value = ev.target.getAttribute("class")
        document.getElementById("thisId").value = ev.target.getAttribute("id")
        document.getElementById("tagName").value = ev.target.tagName
        x = document.createElement("div");
        text = document.createTextNode(ev.target.outerHTML);
        x.appendChild(text);
        x.style.backgroundColor = "blue"
        console.log(x.innerHTML);
        if (document.getElementById("coded_grove").childElementCount.length == 0)
                document.getElementById("coded_grove").appendChild(x.firstChild);
        document.getElementById("coded_grove").firstChild.innerText = (x.innerHTML.substring(3,-3))
        elemCurrentNode = ev.target
        clicked = true
}

This is the site. Thank you in the future.