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 trial

JavaScript jQuery Basics Understanding jQuery Events and DOM Traversal Adding New Elements to the DOM

Libor Gess
Libor Gess
6,880 Points
Posted by Libor Gess
Libor Gess
6,880 Points

The 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>');
Libor Gess
Libor Gess
6,880 Points
Libor Gess
Libor Gess
6,880 Points

I find out why. It looks like the jQuery selectors doesn't like spaces between css selectors!

vftwm
vftwm
17,516 Points

Hi!

$(".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
Libor Gess
6,880 Points
Libor Gess
Libor Gess
6,880 Points

Hi, ohhh yes that simple explanation. Thank you very much :)

vftwm
vftwm
17,516 Points

You're welcome.