嗨！各位看官！今天咱就来说说咋用JavaScript搞Div。为啥要搞Div呢？主要原因是网页上啥都是Div嘛！你想改啥都得先找到这玩意儿，然后才能改。所以学会弄Div很重要！特别重要！

为啥要动态搞Div？

你可能会问，为啥不直接在HTML里写好Div呢？那当然可以啦！但是如果你的网页需要根据用户操作或者数据变化来改变内容呢？比如用户点个按钮，就多加一个Div，那总不能每次都手动改HTML吧？太麻烦了！所以咱就得用JavaScript来动态创建。

什么是“动态”？

“动态”就是说不是写死在HTML里的。你想加几个就加几个，想删几个就删几个。就像搭积木一样，想搭啥搭啥。当然了搭积木之前得先有积木块儿对不对？咱这儿的积木块儿就是 Div，请大家务必...。

第一步：先找个地方放Div

你想把Div放哪儿呢？总得有个地方放吧？这个地方咱叫“容器”。容器就是一个已经存在的HTML元素， 啥玩意儿？ 比如一个 或者一个 。咱先给它起个名字方便找它。

别担心... let container = document.getElementById; // 先找到那个容器

这个document.getElementById 就是用来找名字叫“container”的元素的。记住啊，“container”是你要在HTML里写的！不然找不到哦，我爱我家。！

第二步：造第一个 Div

找到了容器之后咱们就可以开始造 Div 了。这玩意儿很简单，太刺激了。。

const firstDiv = document.createElement; // 造一个 Div

这个document.createElement 就是用来造 Div 的命令。很简单吧？记住啊，“div”必须是小写的！大写不行哦!

给 Div 起个名字

一句话。 光造个 Div 不够啊，还得给它起个名字才能识别它呀! 这名字咱叫“类”。你可以理解成给每个 Div 贴上不同的标签。

firstDiv.className = "class1"; // 给第一个 Div 起名叫 class1，我始终觉得...

准确地说... 这样以后你就可以通过 “class1” 来找到这个 Div 了。想给它穿颜色、改大小都行。

第三步：把第一个 Div 放进容器

.

container.appendChild; // 把第一个 Div 放进容器里 这个container.a 体验感拉满。 ppendChild 就是把 firstDiv 这个 div 加到 container 这个容器里面去 。 .

.

我整个人都不好了。 const secondDiv = document.createElement; // 造第二个 div secondDiv.className = "class2"; // 给第二个 div 起名叫 class2

让第二个 Div 当第一个的儿子

firstDiv.appendChild; // 太坑了。 让第二个 div 当第一个 div 的儿子! .

第五步：重复操作

.

javascript function createNestedDivs { // 定义一个函数来创建嵌套的 divs const firstDiv = documen 嚯... t.createElement; // 创建第一个 div firstDiv.className = "class1"; // 给第一个 div 添加类名 class1

firstDiv.appendChild; // 将第二个 div 添加到第一个 div 中 container.appendChild; // 将第一个 div 添加到容器中! } 嗯，就这么回事儿。 // 调用函数来创建嵌套的 divs createNestedDives;createNestedDives;createNestedDives; // 多调几次就能看到效果啦~

.

再说说：验证一下成果!

.

.

注意事项

• 一定要先找到容器!
• 记得给每个 Div 起个名字 !
• `appendChild` 的顺序很重要!
• 不要忘了在 HTML 里写好 container 的 id !

.