How to replace list item content using jQuery?

Question

I'm trying to make a button that will replace the content of a li. I've searched other answers on here, but I get this error: Uncaught TypeError: Object li#element2 has no method 'replaceWith'

I've tried replaceWith, .html, and .text, but they all have the same Here's my page:

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

Do not forget to close your <li> tags. ;)

Guilherme Sehn
– Guilherme Sehn

2013-10-29 01:18:07 +00:00
Commented Oct 29, 2013 at 1:18 — Guilherme Sehn
– Guilherme Sehn, Commented Oct 29, 2013 at 1:18

Community · Accepted Answer · 2017-05-23 11:58:47Z

12

Typo

missing $ sign

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

fiddle DEMO

Commented by NicoSantangelo

You also don't need $("li#element2") it will be faster with $("#element2") as id is unique so don't have to use tag selector with it.

Better use .text()

fiddle DEMO

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

Correct your markup close li tags

<ul id="theList">
  <li id="element1">Element 1</li>
  <li id="element2">Element 2</li>
  <li id="element3">Element 3</li>
</ul>

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Oct 29, 2013 at 1:16

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nicosantangelo Over a year ago

"li#element2" === "#element2" just more "expensive"

Tushar Gupta - curioustushar Over a year ago

@NicoSantangelo ty i didn't see that lol ..!! But updated answer now.

Collectives™ on Stack Overflow

How to replace list item content using jQuery?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related