时间戳

首页 > 解决方案 > 有人可以解释这个函数链的问题吗？没有得到预期的功能

javascript - 有人可以解释这个函数链的问题吗？没有得到预期的功能

问题描述

我正在尝试理解 JS 和 jQuery，并有一些代码将元素附加到 DOM。我尝试创建一个文本节点并将其附加到元素节点，然后将其附加到第一个 div 标记，所有这些都在一个语句中。我知道这可能是不好的做法，但我只是想看看是否可行。似乎它应该可以工作，因为 createElement() 返回新的元素对象，并且我在该对象上调用 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>

标签： javascriptmethod-chaining

解决方案

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

推荐阅读