Learning how to use selectors to navigate the DOM is the first step to successfully understanding jQuery. But after you have selected an element, you need to do something with it, which in this case is adding, removing, cloning, replacing, or adding styling. In the future, I refer to the selected element as the matched set because I can assume that selector has returned an element.
The real fun with jQuery begins with DOM manipulation. I have touched on a few ways to add CSS properties to the DOM, but now I'm going to dive in deeper and show you how to really customize your page. If you are familiar with the native JavaScript functions that can handle some of this editing, jQuery can do it better using syntax that's easier to understand and with less code. Similar to manipulating HTML elements on your Web page, you can also manipulate the content.
ADDING, REMOVING, CLONING, AND REPLACING DOM ELEMENTS AND CONTENT
jQuery is extremely powerful at adding, removing, replacing, and cloning elements and content in the DOM. For example, I work at a company where, if I need to change HTML on a page, I have to get a backend developer involved, who then has to compile the code before my HTML changes show up. This process is time-consuming, especially for small changes. This is where JavaScript really comes in handy. Making updates to JavaScript files on a production server is a smaller deployment than having to upload page templates, config files, and so on. I can use jQuery and CSS to manipulate the DOM, which is much faster than getting a backend developer involved. The following examples are common techniques for manipulating
the DOM yourself with jQuery.
- Adding HTML to the DOM
The .html() method uses the native innerHTML property and works by either grabbing the html() or passing an argument (HTML code) to the method between the parentheses. You must understand that the .html() method grabs the DOM elements contained within the selector that you have targeted.
<!doctype html>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script>
$(document).ready(function() {
$('.content').html('<div class="main">Hello jQuery.</div>');
});
</script>
<body>
<div class="content">
<p>I eat 2 times a day.</p>
<p>I lift weights 3 times a week.</p>
</div>
</body>
</html>
- Adding Text to an Element in the DOM
The text() method works exactly like the .html() method, with the difference being that the text() method is only grabbing the text in the form of a string from the matched element. These two methods work in two ways: getting the values and setting the values by passing in arguments. You cannot pass HTML code into the text element, only strings.
$('.content').text('Testing 1 2 3.');
- Appending and Prepending HTML within an Element
If you would like to add HTML within an element, you can use the append() method to add it to the end or the prepend() method to add it to the beginning of the selected element. The HTML that you supply within the parenthesis is always inserted before or after the last child element within the element that you have selected.
- Adding HTML Before and After Elements in the DOM
The before() and after() methods are very similar to the append() and prepend() methods. The main difference is where the HTML is inserted. Instead of inside the selected element, the HTML is inserted before and after the selected element.
- Removing HTML Elements from the DOM
The remove() method is useful for removing elements from the DOM. I tend to hide the element with CSS, but you could alternately use the remove() method to pull it completely off the Web page. This method is very easy to use: You just need to add the .remove() method to the selector, and after the DOM is ready, it will be removed. You can also remove specific child or descendent elements by selecting the parent and passing the child of that element to the remove() method.
- Cloning HTML Elements
You may encounter a situation where you need to copy an element in the DOM and place it somewhere else. jQuery has a method called clone(), which clones whichever element you select. Aft er the element is cloned, you are free to place it where you like using other manipulation methods such as the append() method, as shown in the following code example:
$('.product').clone().append('.product');
0 comments:
Post a Comment