主页 / 问题 / 1189755
Accepted
Marina
Asked:2021-10-13 19:49:36 +0000 UTC2021-10-13 19:49:36 +0000 UTC

将新元素附加到不同的块

  • 772

为什么新的块元素附加到第二个div？并且从一开始就消失了。我知道，当我们创建一个元素时，实际上 DOM 中会出现一个新对象，并且会附加一个指向该对象的链接。如果我们将新元素重新附加到另一个 div，为什么它会丢失？可以从不同的地方引用同一个对象。或者它是附加的功能？谢谢！

<div class="box-1"></div>
<div class="box-2"></div>

let block = document.createElement('div');
block.classList.add('new');

document.querySelector('.box-1').append(block);
document.querySelector('.box-2').append(block);
javascript

1 个回答

  1. Best Answer

    这就是 append 的工作方式，它不会复制传递的元素，而是传输它。在您的示例中，该块首先从 dom 转移到 box-1，然后从那里转移到 box-2。

    要在每个块中插入一个元素，您需要每次都创建该元素。为方便起见，您可以将其包装在一个函数中。

    first(".box-1").append( new_block() );
first(".box-2").append( new_block() );

function new_block() {
  // При каждом вызове создает и возвращает новый блок
  let block = document.createElement("div");
  block.className = "new";

  return block;
}

function first(selector) {
  return document.querySelector(selector);
}
    .new {
  width: 60px;
  height: 60px;
  margin: 4px;
  background-color: #a22;
}
    <div class="box-1"></div>
<div class="box-2"></div>

    还有一个用于复制元素的 cloneNode() 方法：

    let block = document.createElement("div");
block.className = "new";

first(".box-1").append( block.cloneNode() );
first(".box-2").append( block.cloneNode() );


function first(selector) {
  return document.querySelector(selector);
}
    .new {
  width: 60px;
  height: 60px;
  margin: 4px;
  background-color: #a22;
}
    <div class="box-1"></div>
<div class="box-2"></div>

    • 4

相关问题