jQuery .text() changes my h1 to a normal text after passing a number

Question

I have something like this:

<li id="machine" ><h1>Machine</h1></li>
<li id="player"><h1>Player</h1></li>

Showing this:

when I use jQuery to change the text to a number like this:

$("#machine").text(1);
$("#player").text(2);

it will change my h1 to normal tex like this:

How do I keep the h1 to be h1 after passing a number??

Answer 1

You have to target the <h1> directly, otherwise it will remove all tags within the #machine or #player divs.

$("#machine h1").text(1);
$("#player h1").text(2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="machine"><h1>Machine</h1></li>
<li id="player"><h1>Player</h1></li>

Alternatively, put the id directly on the <h1> tags

$("#machine").text(1);
$("#player").text(2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><h1 id="machine">Machine</h1></li>
<li><h1 id="player">Player</h1></li>

Answer 2

text() replaces the complete contents of the tag/class/ID it's applied to, in your case this includes the h1tags, which are inside (i.e. contents of) the #machine and #playerelements.

But you can apply your jQuery to "#machine h1" to avoid that:

$("#machine h1").text(1);

Answer 3

You can instead use the html method $("#machine").html("<\h1> 1 </h1>");