Javascript document.body.append（document.createElement（'；p'；）.innerHTML="；this is p"；）如果我在单独的语句中给出它们，它们的行为会有所不同吗？

我正在尝试使用DOM操作动态添加HTML元素。我尝试了两种方法，但得到了不同的结果。有人能解释一下原因吗

        document.body.append(document.createElement('p').innerHTML="this is p");
        document.body.append(document.createElement('p').innerHTML="this is another p");
        var abc = document.createElement('p');
        abc.innerHTML = 'this is p';
        document.body.append(abc);
        var xyz = document.createElement('p');
        xyz.innerHTML = 'this is another p';
        document.body.append(xyz);

我得到的结果是

这是p这是另一个p

这是p

这是另一个p

---

为什么不给空间呢？如果两种方式相同，为什么输出不同？

似乎是两种不同的输出，因为

document.body.append(document.createElement('p').innerHTML="this is p");

您仍然没有正确地创建元素，并且在创建元素之前分配了值，以便javascript理解追加简单字符串，而不是创建p标记

使用这种方法，首先创建p元素并将其赋值给变量，然后将其追加到body

var abc = document.createElement('p');
abc.innerHTML = 'this is p';
document.body.append(abc);

它会工作。

不返回任何内容，并且

document.body.append（document.createElement（'p'）.innerHTML=“这是p”）只在参数内创建一个textnode，因为传递的参数将被计算为赋值返回的字符串
p
元素仅在计算参数时存在，并且段落从不附加到
正文

单行程序将使用
appendChild
：

document.body.appendChild(document.createElement('p')).innerHTML = "this is p";