在span上创建一个div的For循环
在span上创建一个div的For循环
提问于 2018-05-22 14:05:24
我在我的项目中有多个跨度，我想把每个跨度的内容放到一个div中。
我试过了，但它只把最后一个跨度..提前感谢
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();
}<div>
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
回答 4
Stack Overflow用户
发布于 2018-05-22 14:09:41
每次都需要创建一个新的跨度。在循环中移动const span = document.createElement("span");
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();
}<div>
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
Stack Overflow用户
发布于 2018-05-22 14:09:52
您只需创建一个跨度并重用它。在每次迭代中创建一个新的跨度。
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();
}<div>
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
Stack Overflow用户
发布于 2018-05-22 14:10:42
至少不需要在循环中使用ul.remove()。除此之外，您还需要在循环中创建div。否则，您将覆盖它。
检查代码。结果:3div。每一个都有一个跨度在里面。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50469756
复制相关文章
点击加载更多
相似问题
Arial Unicode MS未在Jtree中对齐
等效于Arial Unicode MS的字体
在JavaFX中使用Arial Unicode MS粗体
如何设置Arial Unicode Ms Font for Crystal Report Chart？
Oracle SQL Developer: Arial Unicode MS和其他字体不可用
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
