为什么我的类段落<p>没有在 JavaScript</p> 中制作段落元素？

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。