有人可以解释这个功能链的问题吗？没有获得预期的功能

Question

我正在尝试理解 JS 和 jQuery，并且有一些代码可以将元素附加到 DOM。我尝试创建一个文本节点并将其附加到元素节点，然后将其附加到第一个 div 标记，所有这些都在一个语句中完成。我知道这可能是不好的做法，但我只是想看看是否可行。它似乎应该工作，因为 createElement() returns 新元素对象，我在该对象上调用 appendChild() 附加从 createTextNode() 返回的对象。然而实际发生的是文本节点被追加，但不是作为 div。由于某种原因，它似乎绕过了 createElement 函数。有人可以解释为什么吗？我什至将它放在括号中以确保它首先执行但无济于事。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  'use strict';
  window.onload = () => {
    let dir = console.dir;
    let log = console.log;
    $('h1').hide();
    $('body').click(() => $('h1').show('slow', () => log('called')));
  };

  function appendDiv() {
    document.getElementsByTagName('div')[0]
      .appendChild((document.createElement('div'))
        .appendChild(document.createTextNode('AppendedDiv')));
  }
</script>
</head>

<body>
  <h1 id="heading1" onclick="appendDiv();">JavaScript and jQuery Practice</h1>
  <p>Practice using JavaScript and jQuery here!</p>
  <div>DIV</div>
  <div>DIV</div>
  <div>DIV</div>
  <div>DIV</div>

Answer 1

您在第一个附加调用中有一个额外的 ()

Answer 2

appendChild returns 附加的 child——所以调用 elem.appendChild(div.appendChild(text)) 实际上会将 text 附加到 elem 而不是 div 与 child text 如您所愿。你应该把它分开：

function appendDiv() {
  const child = document.createElement('div');
  child.appendChild(document.createTextNode('AppendedDiv'));

  document.getElementsByTagName('div')[0]
    .appendChild(child);
}

Answer 3

你的括号不匹配。您不是先附加 div 然后再附加 AppendedDiv 文本，而是将 AppendedDiv 文本附加到原始 div。请参阅此代码中的注释：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  'use strict';
  window.onload = () => {
    let dir = console.dir;
    let log = console.log;
    $('h1').hide();
    $('body').click(() => $('h1').show('slow', () => log('called')));
  };

  function appendDiv() {
    document.getElementsByTagName('div')[0]
      .appendChild(document.createElement('div')) // <-- Match parentheses like this
        .appendChild(document.createTextNode('AppendedDiv')); // <- Match
  }
</script>
</head>

<body>
  <h1 id="heading1" onclick="appendDiv();">JavaScript and jQuery Practice</h1>
  <p>Practice using JavaScript and jQuery here!</p>
  <div>DIV</div>
  <div>DIV</div>
  <div>DIV</div>
  <div>DIV</div>

这是将这些事情分解成多个步骤而不是一次完成所有事情的一个很好的理由，你认为这是“可能是不好的做法”是正确的！像这样的细微错误很容易潜入。

最佳做法是将其分成几个步骤，如下所示：

const wrapper = document.getElementsByTagName('div')[0];
const childDiv = document.createElement('div');
wrapper.appendChild(childDiv);
childDiv.appendChild(document.createTextNode('AppendedDiv'));

更具可读性！

有人可以解释这个功能链的问题吗？没有获得预期的功能

Could someone explain the issue with this function chain? Not getting intended functionality

javascript

method-chaining