Creating content - jQuery Tutorial

- Although retrieving content from the page is pretty cool in and of itself, typically that's not enough to built a robust web application. Usually you need ways to manipulate the page content. As luck would have it jQuery gives us some really good ways of doing just that. Once you've used the selectors and filters to get the content out of the web page, typically you're going to want to do something with it. In addition to working with existing content, there are times when you're going to want to create new content and add it into the page. For these purposes you use jQuery's content creation and manipulation functions. As you'll see in this chapter there are functions for creating, copying, deleting, and moving content around. In addition to manipulating content, jQuery provides some really good cross browser support for working with CSS style information. Including positioning and sizing which we'll also take a look at. Let's jump into some code and get a clearer picture of all this. In your code editor open up the creating_start file in Ch_3. You can see that I've already filled out the document ready function with event handlers for the three buttons down here at the bottom of the page. "Create", "change", and "changeAll" that we're going to use for exercising some functions. So let's start by seeing what the html function does without any arguments. And now I'm just going to put that right up here in my ("document").ready(function). So I'm going to write alert and I'm going to have and expression that get's a reference to my example div. And I'm just going to call html without any arguments. So this example div. Let me look down at the content is right here with all the paragraphs in it and it should look familiar to you right now. Okay so let's save and let's just go ahead and bring this up in the browser. You can see that when the page loads and alert comes up and when called with no arguments the html function simply retrieves the html content of the element that it's called on. So right now we're displaying the html of the div tag that has the ID of example. And you can see that that's all the paragraphs that we have in here. So now let's try something a little bit different. Let's try creating some content by filling out the create content function. I'm going to go ahead and comment that out. Oh and by the way, if you're wondering why I'm using these addEventListener calls here instead of jQuery is because we haven't yet covered the chapter on events. Once we get to the events chapter I'll be using jQuery for my event handling and not these dom methods. Alright so let's go ahead and fill out createContent. So I'll write the same expression I had before. And I'll call html again. This time I would give it a string. It says Hi There. There we go. So to create new content you pass a string of properly formatted html directly to the html function. And this will replace the content of the match set of elements from this selector with the new content. So in this case I'm getting reference to the div that has the ID of example. And when I call html it's going to replace the existing content which is all those paragraphs with whatever I pass in right here. So let's go ahead and save. And let's bring this up. Now click create content. And you can see that that's exactly what happens. Let's try something else. You can also create new html elements by passing a string of html directly to the jQuery function itself and store the results in a variable like this. And then I'll just simply write another expression to get the reference to para1 and then .(newItem). And actually I want to put this in my changeContent function. There we go. That's better. So here I'm calling jQuery directly with a string of html. And this will create a new html element as a jQuery object. So I store that aside in my new variable called newItem. Then I'm going to pass that new object directly to the html function, which I'm calling on the results of this selector. Which is this paragraph, para1. So, going to replace the existing html of that paragraph with the jQuery object so it save. And let's go to the browser and let's refresh. Okay. And now I'm going to click on the change content button. Right, and you can see that the text. The new paragraph appears in the paragraph I changed, right. Finally let's apply content changes to more than one element and for this we're going to edit the change all content function. So I'll fill this out and I'll write my selector to be ("example p"). And for this I'm going to use the text function. Okay. So you see this function get's called when the changeAllTheContent button get's clicked. So let me just save and we'll go back to the browser and refresh. I'll click change all, right. You can see that all the paragraphs get changed. And the reason for that is because in this case I'm selecting all of the paragraphs that are inside the example div. So this is a good example of changing multiple items using one function call because remember this selector expression comes back with a set of matched objects. One more thing I want to point out is that the text function only replaces the text. It does not parse html code. And to demonstrate this go ahead and change the changeContent function to take some html. What I'm going to do is replace this string with some html. This is a paragraph. Okay close that off. Alright, now if this were the html function this string would be converted to html content. The text function doesn't do that. So when I save this and I'm going to refresh the page. Now when I click change all. Notice how the paragraph tags and the angle brackets got converted into text. So jQuery do not recognize that as html code. It just treats it as raw text. The text and html functions give you an easy way of creating content for use in your pages. And as we move through the rest of this chapter you'll see that these can be used with other functions to give you a great deal of flexibility in how you create and manage the content of your web apps.