Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialLibor Gess
6,880 PointsThe append method is not working?
I am doing same practicing on my machine and I cannot append element. But When I change the selector from this $(".columns is-multiline")
to this: $("body")
it's work. Could someone please explain what I am doing wrong? Thank you very much.
Here is my html:
<!DOCTYPE html>
<html>
<head>
<title>App of Coffee</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container is-mobile">
<!--start here -->
<div class="columns is-multiline">
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/test.js"></script>
</body>
</html>
And here is my test.js file:
$(".columns is-multiline").append('<p>');
vftwm
17,516 PointsHi!
$(".columns is-multiline").append('<p>');
This would be a descendant combinator if there was a period before "is-multiline". But there is no descendant in your code with the class "is-multiline". I you want to target an element with both classes "columns" and "is-multiline" you have to write:
$(".columns.is-multiline").append('<p>');
(cf. last example in https://www.w3.org/TR/2018/REC-selectors-3-20181106/#class-html)
1 Answer
Libor Gess
6,880 PointsHi, ohhh yes that simple explanation. Thank you very much :)
vftwm
17,516 PointsYou're welcome.
Libor Gess
6,880 PointsLibor Gess
6,880 PointsI find out why. It looks like the jQuery selectors doesn't like spaces between css selectors!