Я пытаюсь понять 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>
1
Mysasas 12 Окт 2021 в 01:09

3 ответа

Лучший ответ

appendChild возвращает добавленный дочерний элемент, поэтому при вызове elem.appendChild(div.appendChild(text)) фактически добавляется text к elem, а не div с дочерним элементом text, как вы планировали . Вы должны просто отделить это:

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

  document.getElementsByTagName('div')[0]
    .appendChild(child);
}
1
DemiPixel 11 Окт 2021 в 22:15

У вас есть extra () в первом вызове добавления

1
Yisheng Jiang 11 Окт 2021 в 22:12

Ваши круглые скобки не совпадают. Вместо добавления 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'));

Намного читабельнее!

1
Maximillian Laumeister 11 Окт 2021 в 22:20