front-end-developer_1_

Front-End-Developer - Level 1
$(document).ready(function() {
$("button#hello").click(function() {
$("ul").prepend("Hello!");
});
$("button#goodbye").click(function() {
});
$("ul").prepend("Goodbye!");
$("button#stop").click(function() {
$("ul").prepend("Stop copying me!");
});
});
The .prepend() method will insert the text of the argument it's given into to the top of
as the first child of the . (As you might guess, there's also a .append() method that
would insert at the bottom as the last child of the ; there are also .before() and
.after() methods that would add the argument before or after the tag as siblings,
rather than within it as children.)
This is nice, but not a very fun conversation. Let's have the webpage say something different
back to the user:
scripts.js
$(document).ready(function() {
$("button#hello").click(function() {
$("ul#user").prepend("Hello!");
$("ul#webpage").prepend("Why hello there!");
});
$("button#goodbye").click(function() {
$("ul#user").prepend("Goodbye!");
$("ul#webpage").prepend("Goodbye, dear user!");
});
$("button#stop").click(function() {
$("ul#user").prepend("Stop copying me!");
$("ul#webpage").prepend("Pardon me. I meant no offense.");
});
});
Of course, we need to change the tags to have IDs for user and webpage . For the
sake of brevity, I won't bother showing the updated HTML here. Go ahead and do that
yourself.
DOM Manipulation and Traversal
172