HTML and CSS Reference
In-Depth Information
<head>
<title>
Altering Classes on the Fly
</title>
<script src=”jquery-1.4.2.min.js” type=”text/javascript” charset=”utf-
8”></script>
<script type=”text/javascript” charset=”utf-8”>
$(function () {
$(“#editable li”).live('click', function () {
$(this).remove();
});
$(“#clearList”).click(function (event) {
event.preventDefault();
$(“#editable”).empty();
});
16
$(“#addElement”).submit(function (event) {
event.preventDefault();
$(“#editable”).append(“<li>” + $(“#addElement
input[name='liContent']”).val() + “</li>”);
$(“#addElement input[name='liContent']”).val(“”);
});
});
</script>
</head>
<body>
<ul id=”editable”>
</ul>
<p>
Click on an item in the list to remove it.
</p>
<p><a id=”clearList” href=”#”>
Clear List
</a></p>
<form id=”addElement”>
<label>New list item: <input name=”liContent” size=”60” /></label>
<input type=”submit” value=”Add Item” />
</form>
</body>
</html>
There are other methods for adding content in different locations in relation to a selected
element. For example, if I change the
append()
call to
prepend()
, new items will be
added to the top of the list rather than the bottom. You can also use the
before()
method
to add content before another element and the
after()
element to add it after. The differ-
ence is that when you use those methods, the content is placed outside the tags matched
by the selector, rather than inside those tags.
