Question

我开始使用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元素的最末端，获得一个追加而不是前置。

我想成功的第一个案例只是一个侥幸，但我看不出这种链式练习有什么问题。

Answer 1

你在错误的地方有括号。你的行：

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)

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

了解基本的DOM链接

1 个答案: