jQuery .text() ändert meine h1 zu einem normalen Text nach einer Reihe

Question

vorbei ich so etwas wie diese:

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

Zeigen dieser:

wenn ich jQuery verwenden zu ändern der Text in einer Reihe wie folgt aus:

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

wird es mein h1 t ändern o normalen tex wie folgt aus:

Wie halte ich die h1 nach dem Passieren einer Reihe h1 werden ??

Answer 1

Sie müssen die <h1> direkt anzielen, sonst werden alle Tags innerhalb der #machine oder #player divs entfernt.

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

Alternativ dazu können Sie die ID direkt auf die <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() ersetzt den gesamten Inhalt des Tags/Klasse/ID es angewendet wird zu, in Ihrem Fall schließt dies die h1 Tags, welche sind innerhalb (d.h. Inhalt der) #machine und #player Elemente.

Aber Sie können Ihre jQuery "#machine h1" gelten zu vermeiden, dass.

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

Answer 3

Sie können stattdessen die HTML-Methode $ ("# machine") verwenden html (“< \ h1> 1 </h1> ");