Edit HTML with returned jQuery html() content

Question

I want to edit some HTML I get from a var I saved. like:

var testhtml = $('.agenda-rename').html();
console.log($('input',testhtml).attr('name'));

Also tried

console.log($(testhtml).find('input').attr('name'));

But i get undefined? I figured it'd work like an $.ajax, $.get, $.post? How else can i do it?

Answer 1

When you call .html(), you're only getting the content, not the .agenda-rename. So if the input is a direct child of .agenda-rename, then .find() won't be able to find it.

Probably better just to do without the .html() call:

var testhtml = $('.agenda-rename').clone();  // or .clone(true)
console.log($('input',testhtml).attr('name'));

Now you have the .agenda-rename element(s) and you'll be able to search for elements nested inside it/them.

---

EDIT: Based on comment, OP doesn't want to modify the original. As such, .clone() can be used. Answer above has been edited to reflect change.

If events are attached that should be retained, then you use .clone(true).

---

EDIT: The reason $('input',testhtml) and $(testhtml).find('input') give the same result is that they are actually the same thing.

jQuery converts the first version into the second behind the scenes. As such it is technically a little more efficient to use the second than the first.

Here's the code where jQuery makes the switch (after running a bunch of other tests to determine what it was passed).

http://github.com/jquery/jquery/blob/master/src/core.js#L150