Question

我返回HTML，我需要将其附加到页面上的元素上，但是它不是类型节点，是否可以转换它？

generateOptionMonths()方法的代码最初在createCheckpointModalHtml()中，并且一切正常，但是整个代码非常复杂，因此我想作为一个单独的方法来做。我不明白为什么它不起作用，考虑到它在createCheckpointModalHtml()中时是完全相同的代码，并且可以正常工作。

class CheckpointsArea {

   constructor(){
        this.monthsNames = this.generateOptionMonths();
   }

   createCheckpointModalHtml(){
        let chooseMonth = createElement("select", "select-month");
        chooseMonth.appendChild(this.monthsNames);//Error is here
   }

   generateOptionMonths(){
    let monthNames = this.getDaysAndMonth().map( date => {

        let month = createElement("option", "select-option");
        month.innerText = date.Name;

        return month
    });
    }

}

错误：未被捕获的TypeError：无法在“节点”上执行“ appendChild”：参数1的类型不是“节点”。

Answer 1

我可以这样修改您的代码

<html>
    <head></head>
    <body></body>
    <script>
        class CheckpointsArea {
            constructor(){
                this.monthsNames = this.generateOptionMonths();
                console.log(this.monthsNames);
                this.createCheckpointModalHtml();
            }

            getDaysAndMonth() {
                return [{Name: 'foo'}, {Name: 'bar'}];
            }

            createCheckpointModalHtml(){
                let chooseMonth = document.createElement("select", "select-month");
                this.monthsNames.forEach(m => chooseMonth.appendChild(m));
                document.body.appendChild(chooseMonth);
            }

            generateOptionMonths(){
                return this.getDaysAndMonth().map( date => {
                    let month = document.createElement("option", "select-option");
                    month.innerText = date.Name;
                    return month;
                });
            }
        }
        const cp = new CheckpointsArea();
    </script>
</html>

您有2个主要问题。

您试图通过数组调用appendChild。而是在数组上循环并附加每个元素。
generateOptionMonths未返回任何内容。 map函数中的lambda是，但函数本身不是。

您也没有将select元素附加到文档主体。

是否可以将html转换为类型node？

1 个答案: