Objasnění JS kódu

Ahoj, může mi to někdo vysvětlit?

R1     $('.con').on('click', 'p', function(){
R2       var value = $(this).html();
R3       var tempInput = document.createElement("input");
R4       tempInput.style = "position: absolute; left: -1000px; top: -1000px";
R5       tempInput.value = value;
R6       document.body.appendChild(tempInput);
R7       tempInput.select();
R8       document.execCommand("copy");
R9       document.body.removeChild(tempInput);
R10     });

R1 - jasný
R2 - jasný
R3 - proč mám vytvářet nový element <input> když požadovaný text již mám?
R4 - a ještě navíc ho stylovat?
R5 - jasný
R6 - vytvoření potomka? Proč?
R7 - nevím
R8 - tohle by snad mělo uložit požadovaný text do schránky (to jediné potřebuji)
R9 - jasny

Proč nefunguje prostě jen něco jako

$('.con').on('click', 'code', function()
{
        var value = $(this).html();
        var tempInput;
        tempInput.value = value;
        tempInput.select();
        document.execCommand("copy");
});

Díky moc.