首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >创建div &然后在其中创建div

创建div &然后在其中创建div
EN

Stack Overflow用户
提问于 2022-08-02 19:04:12
回答 1查看 27关注 0票数 -2

我可以使用以下语法创建一个新的div:

代码语言:javascript
运行
复制
function createClass() {
 const firstDiv = document.createElement('div')
 firstDiv.classList.add('class1')
 container.appendChild(firstDiv)
}

接下来,我想在这个div中创建一个新的div。我尝试了相同的语法,但没有成功:

代码语言:javascript
运行
复制
function createClass() {
 const firstDiv = document.createElement('div')
 firstDiv.classList.add('class1')
 container.appendChild(firstDiv)

 const secondDiv = document.createElement('div')
 secondDiv.classList.add('class2')
 firstDiv.appendChild(secondDiv)
}

如果我使用下面的语法,它可以工作,但有一个问题。如果函数执行不止一次,则只创建一次第二类。因此,如果执行两次,结果将是:

代码语言:javascript
运行
复制
<div class="class1"><div class="class2"></div></div>
<div class="class1"></div></div>

document.getElementsByClassName('class1')[0].appendChild(secondDiv)

有什么帮助吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-08-02 19:11:36

您的代码不包括将动态HTML附加到文档中。但是当完成时,输出就和预期的一样。

代码语言:javascript
运行
复制
let container = document.getElementById("container");

function createClass() {
 const firstDiv = document.createElement('div')
 firstDiv.classList.add('class1')
 container.appendChild(firstDiv)

 const secondDiv = document.createElement('div')
 secondDiv.classList.add('class2')
 firstDiv.appendChild(secondDiv)
 
 // Your post doesn't include appending the first div to the document
 container.appendChild(firstDiv);
}

createClass();
createClass();
console.log(container.innerHTML);
代码语言:javascript
运行
复制
<div id="container"></div>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73212534

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档