How can I edit the child of html node in JS?

Question

Don't know how to phrase this question but I need to modify the child of node :

<a id="page_number">1 / 1</a>

I'm using JS and JQuery. Up so far I get the node like this:

$("#page_number")[0]

Can I get this without have to use the square brackets (getElementById?). Then how to I modify the value '1 / 1'?

Answer 1

$("#page_number")[0] is giving you the raw dom node back from the jQuery object (by the way equivalent to $("#page_number").get(0) - note that I added the "#" in the selector which you need if you work with jQuery.

So you have two choices:

Raw DOM

//get
var myvar = document.getElementById("page_number").innerHTML;
//set
document.getElementById("page_number").innerHTML = "New Content";

jQuery

//get
$("#page_number").html();
//set
$("#page_number").html("New content");

Answer 2

$("#page_number").html("this is the new content");