JS appendChild 不生效？揭秘「腳本先於 DOM 執行」的經典陷阱

失效代碼現場

<!DOCTYPE html>
<html>
<head>
  <script>
    var node = document.createElement("li");
    var text = document.createTextNode("Water");
    node.appendChild(text);
    document.getElementById("test").appendChild(node); // 報錯或無效果
  </script>
</head>
<body>
  <ul id="test"><li>Coffee</li><li>Tea</li></ul>
</body>
</html>

根本原因

瀏覽器**自上而下**解析 HTML。當 `