Question

I have a little issue with jquery .

Let say i have the following statement :

var content = $('#details').html();

How do i find something inside content ?

This is what i’ve tried :

// i want to empty the data inside the id=student
content.find('#student').html('');

But since content is a string … how can i assign HTML to a variable and be able to search that ?

Update :

Here is what i’m trying to achieve :

I have an ajax query and i need the (#details) structure intact .

If i empty the structure and then for a different ajax query i might need to do some replacement inside #student which wont be available because it was cleared …

ex:

<div id="details">

 <div id="student">
   <span> {%weeks%} </span>
 </div>

 <div id="teacher">
   <span> {%whatever%} </span>
 </div>
</div>

so sometime i need to clear student / sometime teacher depending on the ajax query , that’s why i make a copy of the html .

Answer 1

As IDs must be unique you can select the element directly by ID which is more efficient that creating a redundant jQuery object.

$('#student').html('');

You can also use empty method:

$('#student').empty();

Note that if you are using ajax, you can use html method for changing the html content of the element and there is no need to removing html contents.

// ...
success: function(data) {
     $('#student').html(data);
} 

In case that you want to cache the object, you can use end method for returning to previous state:

var $content = $('#details');
$content
   .find('#something').foo().end()
   .find('#anotherElement').bar().end()

Or if you want to copy the element, use clone method:

var $contentCloned = $('#details').clone();