Javascript 同时使用文本创建元素

我试图用一些文本创建一个段落元素，但我认为我是在将段落元素添加到DOM之前追加文本。我怎样才能解决这个问题

function myFn() {
  var paragraph = document.createElement("P");
  var text = document.createTextNode("This is some paragraph text.");

  paragraph.className = "heading";
  paragraph.style.width = "100vw";
  paragraph.style.background = "blue";
  document.getElementById("container").appendChild(paragraph);
  document.getElementById("heading").appendChild(text);
}

钢笔：

谢谢

用这个

function myFn() {
  var paragraph = document.createElement("P");
  var text = document.createTextNode("This is some paragraph text.");

  paragraph.style.width = "100vw";
  paragraph.style.background = "blue";
  paragraph.appendChild(text); 
  document.getElementById("container").appendChild(paragraph);      
}

试着这样做：

---

下面是帮助将元素附加到dom的代码

---

我有你的代码附加内容。我喜欢这样，因为我通过引用段落的变量名（而不是元素ID/类）来追加文本，但我得到了错误：uncaughttypeerror:无法读取undefined的属性'appendChild'。

function myFn() {  
  var paragraph = document.createElement("P");
  var text = document.createTextNode("This is some paragraph text.");

  paragraph.id = "heading";

  paragraph.style.width = "100vw";
  paragraph.style.background = "blue";
  document.getElementById("container").appendChild(paragraph);
  document.getElementById("heading").appendChild(text);
}

    function myFn() {
  var paragraph = document.createElement("P");
  var text = document.createTextNode("This is some paragraph text.");

  paragraph.appendChild(text);

  paragraph.className = "heading";
  paragraph.style.width = "100vw";
  paragraph.style.background = "blue";
  var currentDiv = document.getElementById("container");
  document.body.insertBefore(paragraph, currentDiv);
}