帮女朋友看作业之appendChild的坑

今天女朋友让我帮她看一下她的 web development 的课程作业,题目是这样的:

  • a button "Add emoji"
  • Whenever the user clicks the button "Add emoji", one more emoji will be added to the webpage:
  • when user clicks "Add emoji" for the first time, display one star emoji;
  • if the user clicks "Add emoji" again, display two emojis: a star and a smiling face;
  • if the user clicks "Add emoji" again, display two emojis: a star and a smiling face, and your name after them;
  • if the user clicks "Add emoji" again, on the first line display two emojis: a star and a smiling
    face, and your name, and then another line with a star emoji;
  • if the user clicks "Add emoji" again, on the first line display two emojis: a star and a smiling
    face, and your name, and then another line with two emojis: a star and a smiling face;
  • if the user clicks "Add emoji" again, display two lines (with the same content) of a star emoji, a smiling face emoji, and your name;
  • and the pattern keeps going like this.

虽然咱秋招唯唯诺诺 ,但这作业不得重拳出击给女朋友见识下咱的实力! 实现完就是下面这个很简单的效果:

如果你学生时代经常被同学问问题会发现,把正确的答案告诉她很容易,但她非想知道她错在哪里,这可能就很麻烦了;就好像大佬直接把我的代码推翻重写,远比帮我 debug 要快得多一样。

只见她掏出了如下代码跟我说:"我照着 GPT 给的代码瞎鼓捣,突然就实现了, appendChild 不是把将一个节点附加到指定父节点的子节点列表的屁股后头吗?这代码的效果不应该是balabala..."

代码:

html 复制代码
<body>
        <button onclick="addEmoji()">Add emoji</button>
        <div id="emojiContainer"></div>

        <script>
            let clickCount = 0;
            let newElement;
            function addEmoji() {
                clickCount++;
                let emojiContainer = document.getElementById('emojiContainer');
                
                if (clickCount % 3 === 1) {
                    newElement = document.createElement('p');
                    newElement.textContent = '⭐';
                } else if (clickCount % 3 === 2) {
                    newElement.textContent += ' 😀';
                } else {
                    newElement.textContent += ' Shaowei Li';
                    emojiContainer.appendChild(newElement);
                }

                
                if (clickCount % 3 !== 0) {
                    emojiContainer.appendChild(newElement);
                }
            }
        </script>
    </body>

她认为这段代码的效果应该是:

嘿,您还别说,乍一看好像真是这么回事。那到底是什么导致了三次点击中, newElement 中的内容没有被依次添加到父节点的最后呢?老实说我也忘了,实习用框架不用操作DOM,秋招八股文也没背到过这块。

于是乎我借口上厕所,在马桶上偷偷掏出手机打开Node.appendChild

Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中,那么 appendChild() 只会将它从原先的位置移动到新的位置(不需要事先移除要移动的节点)。

"咳咳,这个问题其实很简单,(将上面的文档内容背诵了一遍),你这里 newElement = document.createElement('p') 在每一行开始的时候都将 newElement 设置成了一个新的节点,而在没有离开这一行时, newElement 指向的是同一个节点,即被插入节点已经存在于文档树中了。Node.appendChild() 会将它移动到新位置,对这里来说就是仍在这一行;而 document.createElement() 返回的是一个新的节点,Node.appendChild() 会将它作为新的子节点插入末尾,故而每一次 clickCount % 3 === 1 才会开启新的一行。"

"......"

"懂了不?(我牛不牛,还不夸我?)"

"这么麻烦,不看了,反正走产品不用懂这个"

"......(感情你搁这抽查我知识点呢)"

相关推荐
Bellafu66624 分钟前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird3 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者4 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强4 小时前
Chrome和IE获取本机ip地址
前端
天***88964 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*4 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v5 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls5 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友5 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵5 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构