我刚刚开始使用JQuery，并且想在单击按钮时在HTML中添加li元素。
我的HTML代码：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="filtres">
<input id="filtre1" type="button" value="filtre 1" onclick="test()">
</div>
<div id="liste">
<ul>
<li>Bonjour</li>
</ul>
</div>
</body>
</html>
和我的js文件：
function test() {
console.log("On clique");
$("<li>Coucou</li>").appendTo("<ul>");
}
不幸的是，它不起作用，我也不明白为什么。
你有什么主意吗 ？
问题是因为您的选择器不正确。appendTo('<ul>')正在尝试在内存中创建一个新ul元素并将其追加li到该元素。相反appendTo('ul')，您需要使用，而不使用尖括号。
我还建议您使用不显眼的事件处理程序，而不要使用过时的onclick属性。这是完整的示例：
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="filtres">
<input id="filtre1" type="button" value="filtre 1" />
</div>
<div id="liste">
<ul>
<li>Bonjour</li>
</ul>
</div>
</body>
</html>
jQuery(function($) {
$('#filtre1').on('click', function() {
console.log("On clique");
$("<li>Coucou</li>").appendTo("ul");
});
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句