用于将子项附加到函数调用者/调用者的 ES6 Javascript

问题描述

我用谷歌搜索并检查了几乎所有的帖子，以找到一些关于如何将子/节点附加到函数调用者或函数调用者父节点的参考，但徒劳无功，因为我没有找到任何能说明问题的文章就可以了。

我已经尝试过下面的代码，但它抛出了错误：Uncaught TypeError: this.appendChild is not a function:

<button class="class1 class2 class3" onclick="addSubNode(this)">Add Node</button>
<script type="application/javascript">
function addSubNode() {
let subNode = document.createElement('span');
subNode.classList.add('class1');
subNode.innerText = 'TestSpan';
// this.classList
this.appendChild(subNode);
}
</script>

如果我尝试获取它的 classList（注释行），那么它也会显示 this.classList is not a function。

我如何实现我在问题中解释的内容？

JS Fiddle

解决方法

    <button class="class1 class2 class3" onclick="addSubNode(this)">Add Node</button>
    <script type="application/javascript">
    function addSubNode(that) {
        let subNode = document.createElement('span');
        subNode.classList.add('class1');
        subNode.innerText = 'TestSpan';
        // this.classList
        that.appendChild(subNode);
    }
    </script>