jQuery set attribute on newly generated item

Question

I'm getting the select html and want to give it a new name, this is what I'm trying at the moment:

var sel = $("#rmFilesListSelect").html();
$(sel).attr({name: "item_files[fid-123]"});
$("#someTable tbody").append("<tr><td>" + sel + "</td></tr>");

However, this does not work as I would expect it. Instead it inserts the old id from #rmFilesListSelect. What am I missing here?

EDIT: I have ended up using a combination of several comments (including outerHTML() from https://stackoverflow.com/a/5259788/1231450, linked by bitfiddler)

var sel = $("#rmFilesListSelect").clone();
$(sel).attr({name: "item_files[fid-123]"});
$("#someTable tbody").append("<tr><td>" + $(sel).outerHTML() + "</td></tr>");

Thank you very much!

Aguardientico · Answer 1 · 2013-07-02T18:25:08.180

1

try:

var sel = $("#rmFilesListSelect").html();
$(sel).wrapAll("<tr><td><div id='item_files[fid-123]'></div></td></tr>");
$("#someTable tbody").append("sel");

EDIT: And somethin like this?

var sel = $("#rmFilesListSelect").clone();
$(sel).attr({id: 'new_id', name: 'new_name'});
$("#someTable tbody").append(sel);

edited Jul 02 '13 at 18:25

answered Jul 02 '13 at 18:02

Aguardientico

7,641
1
33
33

Good idea and +1 for wrapAll but I need to change the select id and name (not the div around it). – Jan Jul 02 '13 at 18:13
1

I do a new try, please give a look – Aguardientico Jul 02 '13 at 18:25
I've used your and bitfiddler comments and have updated my question in order to reflect the code that did the trick. – Jan Jul 02 '13 at 19:01

score 1 · Answer 2 · answered Jul 02 '13 at 18:04

1

Your first line set the variable sel to the html not the object. In line 2 your treat it like an object and try to set it's name attribute. I think you need to change line 1 to:

var sel = $("#rmFilesListSelect");

and line 3 to:

$("#someTable tbody").append("<tr><td>" + sel.html() + "</td></tr>");

answered Jul 02 '13 at 18:04

bitfiddler

2,095
1
12
11

This comes close but inserts the options instead of the whole select element. – Jan Jul 02 '13 at 18:10
1

That what the html() function does - it gets the inner html for the object. You want the outer html. Take a look at this post: http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html – bitfiddler Jul 02 '13 at 18:12
1

Additional to my last comment, you could just use the Javascript native outerHTML attribute like this: `$("#someTable tbody").append("" + sel.outerHTML + "");` – bitfiddler Jul 02 '13 at 18:16

score 0 · Answer 3 · answered Jul 02 '13 at 18:03

0

Use this :

var sel = $("#rmFilesListSelect").html();
// Above line gives the entire html of rmFilesListSelect element
// So better, you can select an element from that html to set the name as used like below line
$(sel).attr("name", "item_files[fid-123]") ;
$("#someTable tbody").append("<tr><td>" + sel + "</td></tr>");

answered Jul 02 '13 at 18:03

Nishu Tayal

20,106
8
49
101

Where is the dofference to my code? The select still has the old id/name. – Jan Jul 02 '13 at 18:15

score 0 · Answer 4 · answered Jul 02 '13 at 18:12

Some examples: js

var jquery_selector = $("#test");
jquery_selector.attr("data-id", "data-test");
var input_value = jquery_selector.data("id"); //got value of extended data attribute
jquery_selector.append('<input type="text" value="' + input_value + '"/>');
jquery_selector.append(jquery_selector.html());

html

<div id="test">some text</div>

http://jsfiddle.net/ZU4BD/2/

Hope it will help.

jQuery set attribute on newly generated item

4 Answers4