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

时间:2013-10-29 01:15:09

标签: javascript jquery html html5 dom

我正在尝试制作一个替代li内容的按钮。我在这里搜索了其他答案,但是我收到了这个错误:未捕获TypeError:对象li#element2没有方法'replaceWith'

我已经尝试过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>

1 个答案:

答案 0 :(得分:11)

错字

缺少$标志

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

fiddle DEMO

<小时/> 评论 NicoSantangelo

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


更好地使用.text()

fiddle DEMO

$(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>