Question

我的项目中有多个跨度，我想获取每个跨度的内容并放入一个div。

我尝试了这个，但它只放了最后一个跨度.. 提前致谢

＆＃13;

const items = document.querySelectorAll("li span");
const div = document.querySelector("div");
const ul = document.querySelector("ul");
const span = document.createElement("span");

for(var i = 0; i < items.length; i++) {
  const item = items[i];
  const content = item.textContent;

  span.textContent = content;
  div.appendChild(span);
  ul.remove();
}

＆＃13;

<div>
  <ul>
    <li><span>One</span></li>
    <li><span>Two</span></li>
    <li><span>Three</span></li>
  </ul>
</div>

＆＃13;

Answer 1

您每次都需要创建一个新的范围。将您的const span = document.createElement("span");移到循环中

＆＃13;

const items = document.querySelectorAll("li span");
const div = document.querySelector("div");
const ul = document.querySelector("ul");

for (var i = 0; i < items.length; i++) {
  const span = document.createElement("span");
  const item = items[i];
  const content = item.textContent;
  span.textContent = content;
  div.appendChild(span);
  ul.remove();
}

＆＃13;

<div>
  <ul>
    <li><span>One</span></li>
    <li><span>Two</span></li>
    <li><span>Three</span></li>
  </ul>
</div>

＆＃13;

Answer 2

您只创建一个范围并重新使用它。每次迭代创建一个新的跨度。

＆＃13;

const items = document.querySelectorAll("li span");
const div = document.querySelector("div");
const ul = document.querySelector("ul");

for(var i = 0; i < items.length; i++) {
  const item = items[i];
  const content = item.textContent;
  const span = document.createElement("span");
  span.textContent = content;
  div.appendChild(span);
  ul.remove();
}

＆＃13;

<div>
  <ul>
    <li><span>One</span></li>
    <li><span>Two</span></li>
    <li><span>Three</span></li>
  </ul>
</div>

＆＃13;

Answer 3

至少不需要在循环内部使用ul.remove()。除此之外，你需要在循环中创建div。否则你会覆盖它。

检查代码。结果：3个div。他们每个人都有一个跨度。

const items = document.querySelectorAll("li span");
const divContainer = document.querySelector("div");
const ul = document.querySelector("ul");

ul.remove();
for(var i = 0; i < items.length; i++) {
  const item = items[i];
  const content = item.textContent;
  divContainer.innerHTML += content;
}

<div>
  <ul>
    <li><span>One</span></li>
    <li><span>Two</span></li>
    <li><span>Three</span></li>
  </ul>
</div>

Answer 4

你做错了。您在for循环之外创建了跨度，这意味着只有一个跨度

<body>
    <div id="div">
      <ul id="ul">
        <li><span class="span">One</span></li>
        <li><span class="span">Two</span></li>
        <li><span class="span">Three</span></li>
    </ul>
    </div>
    <script>
        const items = document.getElementsByClassName("span");
        const div = document.querySelector("div");
        const ul = document.getElementById("ul");
        for(var i = 0; i < items.length; i++) {
            const item = items[i];
            const content = item.textContent;
            var span = document.createElement("span");
            var br = document.createElement("br")
            span.textContent = content;
            div.appendChild(br)
            div.appendChild(span);
        }
        div.removeChild(ul)
    </script>
</body>

对于创建一个div的span的循环

4 个答案: