如何使用 jQuery 替换列表项内容

How to replace list item content using jQuery?

本文关键字：列表 替换 何使用 jQuery      更新时间：2023-09-26

我正在尝试制作一个按钮来替换li的内容。我在这里搜索了其他答案，但我收到此错误：未捕获的类型错误：对象 li#element2 没有方法"替换"

我尝试过 replaceWith、.html 和 .text，但它们都有相同的 这是我的页面：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#theButton").click(function(){
("li#element2").replaceWith("This is the second element")
});
});
</script>
</head>
<body>
<h1 id="header">The document header.</h1>

<p>Value: <input type="text" id="theInput" value="" size=10>

<ul id="theList">
<li id="element1">Element 1
<li id="element2">Element 2
<li id="element3">Element 3
</ul>
<div id="theDiv"></div>
<input type="button" id="theButton" value="click me!""></p>

</body>
</html>

拼写错误

缺少$符号

$("#element2").replaceWith("This is the second element");
^

小提琴演示

尼科桑坦杰洛评论

您也不需要$("li#element2")使用$("#element2")它会更快，因为 id 是唯一的，因此不必使用它的标签选择器。

最好使用 .text（）

小提琴演示

$(document).ready(function () {
    $("#theButton").click(function () {
        $("#element2").text("This is the second element")
    });
});

更正标记关闭li标记 
<ul id="theList">
  <li id="element1">Element 1</li>
  <li id="element2">Element 2</li>
  <li id="element3">Element 3</li>
</ul>
相关文章：