How to select the content inside a div using javascript/jquery

Question

I believe the answer may be quite simple but i cant find the answer by searching.

What i would like to do is to change the contents of a div using jquery. Currently i am using this (which does work, but is not the most elegant solution)

What is the best way to select this?

$(document).ready(function () {
    $("#score-once").click(function ()  {
        var numRand = parseInt(Math.floor(Math.random()*2));
        var currValue = parseInt($("#scored").text());
        var newValue = (currValue + numRand);
        $("#scored").replaceWith("<p id=scored>" + newValue + "</p>")
        currValue = undefined;
        newValue = undefined;
    });     
});

and the html

        <div id="sidebar">
            Goals Scored<br />
            <p id="scored">0</p>
            Goals Missed<br />
            <p>0</p>
        </div>

Answer 1

Here's a tiny improvement:

$(document).ready(function () {
    $("#score-once").click(function ()  {
        var numRand = parseInt(Math.floor(Math.random()*2));
        var currValue = parseInt($("#scored").text());
        var newValue = (currValue + numRand);
        $("#scored").text(newValue)
    });     
});

It probably can't get any better than this :-)

Answer 2

使用jQuery的.html()函数应该可以解决问题。

$("#scored").html(newValue);