為什么我的類 Paragraph 沒有制作段落元素<p>一種</p>在 JavaScript 中？

Question

我在 JS 中有以下一段代碼：

 class Paragraph { constructor(text) { this.text = text; this.createParagraph(); } createParagraph() { var paragraph = document.createElement('p'); var p = paragraph.appendChild(document.createTextNode(this.text)); return p; } } var a = new Paragraph("a"); // <p>a</p> This is the result I want, which I'm not getting console.dir(a);

我希望能夠通過 var a = new Paragraph("a"); 創建我上面描述的內容。 但它不起作用，有人可以幫助解釋為什么嗎？

Answer 1

有兩個問題。 首先createParagraph()需要返回paragraph ，而不是p因為它包含附加的子元素，在這種情況下是文本節點。

其次，構造函數需要返回您在createParagraph()創建的p 。 嘗試這個：

 class Paragraph { constructor(text) { this.text = text; return this.createParagraph(); } createParagraph() { var paragraph = document.createElement('p'); paragraph.appendChild(document.createTextNode(this.text)); return paragraph; } } var newPara = new Paragraph("Lorem ipsum"); document.body.appendChild(newPara); console.dir(newPara);

Answer 2

根據此解決方案更改您的功能：

createParagraph() {
    const paragraph = document.createElement('p');
    document.body.append(paragraph);
    const p = paragraph.appendChild(document.createTextNode(this.text));
    return p;
    }
}

也不要使用var 。