Javascript Jquery克隆并附加到输入值

有人能告诉我如何通过单击span元素本身从span元素克隆并附加到输入值吗？ 这是剧本

$（文档）.ready（函数（）{
$（“span#用户名”）。单击（函数（）{
$（“span#username”）.clone（）.appendTo（“#test”）；
});
});
用户

必须将输入（）的值设置为span（）的文本内容，如下所示：

// IDs are enough
$("#username").click(function() {
    $("#test").val($(this).text()); // this is the span beign clicked
});

无jQuery:

document.getElementById("username").addEventListener("click", function() {
    document.getElementById("test").value = this.textContent;
});

---

@Neof我添加的代码没有jQuery，只有vanilla JS！