JSFiddle - React, Tailwind, and code Playground

HTML

<div style="margin: 5px; border: 1px solid red; width: 300px; height: 50px;" id="A">
A: <input id=fun focused value=fun type=text></input>
</div>


<div style="margin: 5px; border: 1px solid green; width: 300px; height: 50px;" id="B">
B:
</div>

<div style="margin: 5px; border: 1px solid yellow; width: 300px; height: 50px;" id="C">
C:
</div>


<input id=evil type=button value="Do something evil"></input>
<pre id=console>
</pre>

JavaScript

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

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

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

function log(text) {
    console.appendChild(document.createTextNode(text + "\n"));
}

function evilFunc() {
    log("About to focus");
    fun.focus();

    log("Set focus");
    log("Setting timer.");
    setTimeout(evilPart2, 100);
}

function evilPart2() {
    log("Starting callback.");
    var B = document.getElementById("B");
    log("About to call appendChild.");
    try {
        B.appendChild(fun);
    } catch(e) {
        log("appendChild threw");
    }
    log("Ending callback.");
}

function evilBlur() {
    log("Starting malicious blur handler.")
    var C = document.getElementById("C");
    C.appendChild(fun);
    log("Done with malicious blur handler.")
}

evil.addEventListener("click", evilFunc, false);

fun.addEventListener("blur", evilBlur, false);