5

我开始使用 JavaScript 和 DOM，试图故意远离 jQuery 等，至少有一段时间。考虑到这一点，教程通常会提供如下示例：

h = document.createElement("h1");
t = document.createTextNode("Hello.");
h.appendChild(t);
document.body.appendChild(h);

为了简化这一点并避免变量，我成功地链接了以下内容：

document.body.appendChild(document.createElement("h1")).appendChild(document.createTextNode("Hello."));

虽然这可行，但我尝试缩短以下前置操作：

h = document.createElement("h1");
t = document.createTextNode("Put this on top.");
h.appendChild(t);
document.body.insertBefore(h,document.body.firstChild);

具有以下内容：

document.body.insertBefore(document.createElement("h1")).appendChild(document.createTextNode("Put this on top."),document.body.firstChild);

但是这一次它没有按预期工作：文本被放置在 BODY 元素的最末端，获得了追加而不是前置。

我想成功的第一个案例只是侥幸，但我看不出这种连锁做法有什么问题。

4

1 回答 1

6

你在错误的地方有括号。您的线路：

document.body.insertBefore( document.createElement("h1") )
.appendChild( document.createTextNode("Put this on top."), document.body.firstChild );

应该如何：

document.body.insertBefore(
    document.createElement("h1").appendChild(
        document.createTextNode("Put this on top.")), document.body.firstChild);

现在您明白了为什么将所有内容合并在一行中通常是个坏主意。

好的，这条固定行不会为您提供“带有变量”的代码的确切行为。这是因为 .appendChild 返回子 DOM 元素（<INPUT>在您的情况下），而不是父级（<H1>在您的情况下）。但是您希望所有<H1>DOM 元素都添加到文档的开头。要在一行中实现这一点，您需要使用 .parentNode 属性：

document.body.insertBefore(
    document.createElement("h1").appendChild(
        document.createTextNode("Put this on top.")).parentNode, document.body.firstChild)

伙计们，请不要使用这样的代码，这仅用于教育目的）））

于 2012-12-17T20:50:15.723 回答