今天女朋友让我帮她看一下她的 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…”
代码：
<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 才会开启新的一行。”
“……”
“懂了不？（我牛不牛，还不夸我？）”
“这么麻烦，不看了，反正走产品不用懂这个”
“……(感情你搁这抽查我知识点呢)”
原文链接：https://juejin.cn/post/7312818418595069962 作者：FrontEnd_Reese
