manipulate html with jQuery

Question

I have something like this:

<div id='cb1'>
<input name='c1' value='12'>
<input name='c1' value='32'>
   ...
<input name='c1' value='32'>
</div>

<div id='z1'>
</div>

and I need to copy all the inputs from #cb1 to #z1 and rename them to x1, so I would get this:

<div id='z1'>
<input name='x1' value='12'>
<input name='x1' value='32'>
   ...
<input name='x1' value='32'>
</div>

why do you want to name all your inputs the same?!

fearofawhackplanet
– fearofawhackplanet

2011-02-01 13:03:35 +00:00
Commented Feb 1, 2011 at 13:03 — fearofawhackplanet
– fearofawhackplanet, Commented Feb 1, 2011 at 13:03
@fearofawhackplanet it's an array

Omu
– Omu

2011-02-01 13:05:08 +00:00
Commented Feb 1, 2011 at 13:05 — Omu
– Omu, Commented Feb 1, 2011 at 13:05

Raynos · Accepted Answer · 2011-02-01 13:14:53Z

3

$("#cb1").children().attr("name", "x1").appendTo($("#z1"));

or

$("#cb1").children().clone(true).attr("name", "x1").appendTo($("#z1"));

Here we take the children (the inputs) from #cb1 and we optionally clone them depending on whether you want to move them from #cb1 to #z1 or whether you want to duplicate them in #z1

Then we set the attr of name to x1 for all of them and then we appendTo the #z1 container.

Argueably you want to use .find("input") as @Box9 mentioned depending on whether it has any other children. If #cb1 only has inputs then .children is faster otherwise we can take the input elements only. You can also use .children("input")

Also .find looks for nested inputs and .children only looks down one layer

.children, .attr, .appendTo, .clone, .find

edited Feb 1, 2011 at 13:14

answered Feb 1, 2011 at 13:03

Raynos

170k57 gold badges359 silver badges399 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Tang · Accepted Answer · 2011-02-01 13:03:51Z

2

$('#cb1').find('input').clone().attr('name', 'x1').appendTo('#z1');

Use .clone(true) if you have attached data and events that need to be copied too.

answered Feb 1, 2011 at 13:03

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

Comments

Harold Sota · Accepted Answer · 2011-02-01 13:05:24Z

-1

$("#cb1").html("put here the html");

answered Feb 1, 2011 at 13:05

Harold Sota

7,58613 gold badges60 silver badges85 bronze badges

1 Comment

Mariano Desanze Over a year ago

-1 for not knowing nor searching enough about jQuery capabilities for this kind of problem, and giving a rather bad solution. Box9 and Raynos has proven that much better solutions are available.

Collectives™ on Stack Overflow

manipulate html with jQuery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related