Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Libor Gess
Libor Gess
6,563 Points
Posted by Libor Gess
Libor Gess
6,563 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,563 Points
Libor Gess
Libor Gess
6,563 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,563 Points
Libor Gess
Libor Gess
6,563 Points

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

vftwm
vftwm
17,516 Points

You're welcome.