Noob having trouble with selectors on divs
I'm sure I've not formatted something properly, but I can't find it. I've been learning jQuery and experimenting with .text() and .html(). I'm particularly interested in changing the HTML content of a <div>. I tried working my way up through <p> and then into <div>. You can see my various attempts listed below and a comment showing whether or not they worked. Obviously I hit a snag with <div#id>. I thought I might have to .empty() the div first, but that did not work when I added #id. Can anyone point me in the right direction?
- <!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
//$("p").text("Alert: This is the new text content!"); //<- this worked
//$("p#pText").text("Alert: This is the new text content!"); //<- this worked
//$("#pText").text("Alert: This is the new text content!"); //<- this worked
//$("p").html("Alert: This is the new text content!"); //<- this worked
//$("#pText").html("Alert: This is the new text content!"); //<- this worked
//$("div").html("<p>Alert: This is the new html content!</p>"); //<- this worked
//$("div#textHere").html("<p>Alert: This is the new html content!</p>"); //<-this did not work!
//$("div#textHere").empty().html("<p>Alert: This is the new text content!</p>"); //<- neither did this
//$("div").empty(); //<- this worked, but it emptied all the divs
//$("div#textHere").empty(); //<- this did not work
$("div #textHere").empty(); //<- this did not work either
});
</script>
</head>
<body>
<h1>JavaScript and jQuery Experiments</h1>
<div id=”textHere”>
<p id="pText">This paragraph will be overwritten by the feeder programs</p>
<p>This one won't be</p>
</div>
<!-- These will later be clickable to call in HTML from an outside file -->
<div id=”file1”>File 1</div>
<div id=”file2”>File 2</div>
<div id=”file3”>File 3</div>
</body>
</html>
Thanks in advance for your help!