I cant seem to append to a particular id & class. I want HEllow world to be Appened to only 1st
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var id =94;
$("#'id',.m").append(" <b>Hello world!</b>");
});
});
</script>
</head>
<body>
<p id="94" class="postitem m" >This is a paragraph.</p>
<p id="94" >This is another paragraph.</p>
<button>Insert content at the end of each p element</button>
</body>
</html>
I cant seem to append to a particular id & class. I want HEllow world to be Appened to only 1st
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var id =94;
$("#'id',.m").append(" <b>Hello world!</b>");
});
});
</script>
</head>
<body>
<p id="94" class="postitem m" >This is a paragraph.</p>
<p id="94" >This is another paragraph.</p>
<button>Insert content at the end of each p element</button>
</body>
</html>
-
1
Two problems: 1.
idvalues must be unique on the page. 2. Note that youridvalues are invalid for CSS.idvalues for use with CSS must start with a letter. Since jQuery uses CSS selectors for finding elements, I'd strongly remend using valid ones. (Those IDs are also invalid for HTML4, but HTML5 allows them. Just not CSS.) – T.J. Crowder Commented May 12, 2012 at 8:28 - @T.J.Crowder is that true even with HTML5, which does allow numeric IDs ? – Alnitak Commented May 12, 2012 at 8:29
-
@Alnitak: Yes. The HTML5 spec defines what's valid in HTML5, not what's valid in CSS. If you try to use an all-numeric
idvalue with, say,querySelectorAlland you're not in quirks mode, you'll get a selector exception. – T.J. Crowder Commented May 12, 2012 at 8:29 - don't use the same ID on more than one element. It's against the DOM rules, and causes exactly the problem you're having. – Alnitak Commented May 12, 2012 at 8:29
- @T.J.Crowder thanks - worth knowing. I knew HTML5 allowed it but it hadn't occurred to me that they'd still be invalid in CSS. – Alnitak Commented May 12, 2012 at 8:30
2 Answers
Reset to default 4Two problems:
idvalues must be unique on the page. You're using the sameidfor two different elements.Your
idvalues are invalid for CSS.idvalues for use with CSS must start with a letter. Since jQuery uses CSS selectors for finding elements, I'd strongly remend using valid ones. (Those IDs are also invalid for HTML4, but HTML5 allows them. Just not CSS.)
If you correct both of those problems, you'll be fine. Note that if you have unique ids, you don't need the "m" class anymore unless you were using it for something else.
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis./ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var id = 'x94';
$("#" + id).append(" <b>Hello world!</b>");
});
});
</script>
</head>
<body>
<p id="x94" class="postitem m" >This is a paragraph.</p>
<p id="x95" >This is another paragraph.</p>
<button>Insert content at the end of each p element</button>
</body>
</html>
Live example | source
Separately: I strongly remend adding a doctype to that HTML. Without one, you're in quirks mode, and jQuery doesn't support quirks mode (various calculations will be wrong).
Then it must be like this
$('#'+id+'.m').append('<b>Hello world!</b>');
which is $('#94.m') with no spaces to mean that both id and class must exist to match