这确实是一个非常奇怪的问题，我希望它很简单。我无法在我的 html 文档中进行简单的选择和附加操作，但是当我在 chrome 浏览器控制台中时它可以工作。
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="/js/script.js"></script>
<script>
$('[data-js="works"]').append("hello");
</script>
</head>
<body>
<div data-js="works"></div>
test
</body>
</html>
当我将那行脚本放入控制台时，hello 出现在 test 上方。当我刚打开页面时，测试就在那里。我早些时候从这个页面运行了一个脚本，当我试图选择一个元素时它不起作用。然后我去了内联脚本，看看它是否能在那里工作，不。我已经看到它是否可以在没有导入脚本的情况下从内联脚本运行，也没有。控制台没有错误信息。如果需要，我可以从该内联脚本打印到我的控制台，但这段代码仍然无法正常运行。
不能与我的本地 httpserver 一起使用，也不能像本地打开的文件一样工作。
最佳答案
这是因为脚本是在页面加载之前执行的，所以目标div还不存在。
解决方法是等待页面完全加载后再做一些事情。
$ 函数可用于此目的。给它一个回调，它会在页面加载后执行。
您也可以使用不需要 jQuery 的 window.addEventListener("load", callback);。
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script>
$(function(){
$('[data-js=works]').append("hello");
});
</script>
</head>
<body>
<div data-js="works"></div>
test
</body>
</html>另一种解决方案是在页面末尾插入您的脚本。虽然在我看来它并不那么整洁。
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
</head>
<body>
<div data-js="works"></div>
test
<script>
$('[data-js=works]').append("hello");
</script>
</body>
</html>关于javascript - jQuery 选择器在脚本中不起作用，但在控制台中起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36870725/