创建一个元素并将其分配给一个变量

Question

您好希望有人可以帮助我： 我正在像这样在 JS 中创建元素：

let ptag = document.createElement("p");
    // create textNode
    let pNode = document.createTextNode("X-Done");
    // append pNode to paragraph
    ptag.appendChild(pNode);
    console.log(ptag);

输出是：<p>X-Done</p> 这是我所期待的。

但是当我把 ptag 放到这行代码中时：

let para = document.createElement("p");
// create textNode
let myNode = document.createTextNode(i + ". " + invoer + ptag);
// append myNode to paragraph
para.appendChild(myNode);
let elem = document.getElementById('myDiv');
elem.appendChild(para);

输出是： 1. sss [object HTMLParagraphElement] 当我将它添加到屏幕上的一个 div 中时。

为什么它在一个段落中返回 [object HTMLParagraphElement] 而不是 X-done？ 感谢您的澄清，这可能吗？

Answer 1

你不能这样做："。" + invoer + ptag。

let ptag = document.createElement("p");
let pNode = document.createTextNode("X-Done");
ptag.appendChild(pNode);

let para = document.createElement("p");
let myNode = document.createTextNode("text");
para.appendChild(myNode);

let wrapper = document.createElement("div");
wrapper.append(ptag);
wrapper.append(para);

Answer 2

这是因为你把你的ptag 放在createTextNode 里面，把它变成了一个字符串。尝试使用ptag 的内容，例如：

let ptag = document.createElement("span");
// create textNode
let pNode = document.createTextNode("X-Done");
// append pNode to paragraph
ptag.appendChild(pNode);


let i = "i";           // Added because they are no where to be found in your snippet
let invoer = "invoer"; // Added because they are no where to be found in your snippet

let para = document.createElement("p");
// create textNode
let myNode = document.createTextNode(i + ". " + invoer);
// append myNode to paragraph
para.appendChild(myNode);
para.appendChild(ptag);
let elem = document.getElementById('myDiv');
elem.appendChild(para)

<div id="myDiv"></div>