Question

I have no Idea why this selector does not work.

The HTML element is simply:

    <div id="myDiv">Original Text</div>

and the script I am using is simple:

    <script language="javascript" src="jquery.min.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function(){
        $("#myDiv").innerHTML = "Replaced Text";
    });

for some reason this does not work, while two other options does work:

Option 1:

    document.getElementById("myDiv").innerText = "This will work!"

Option 2:

    $("#myDiv").get(0).innerHTML = "This will work as well!"

Every tutorial I was reading is saying that the selector will simply work if I use $(#id) as I did.

Any ideas?

Answer 1

$("#myDiv") is jQuery object, you can’t set its innerHTML property because it doesn’t have one.

Use the jQuery method .html() or .text()

$("#myDiv").html("Replaced Text");

Option 1 works because it’s just plain JS – you select the element and set its property. Option two works because you get the DOM element from the jquery object and set its property – also valid.