Clone & # 8594; change ids & # 8594; add content & # 8594; display & # 8594; add to parent

I have the following setting

<div class="article-content">
    <div class='editors' id="mine">
        <h2>My Text</h2>
        <textarea name="my_text" id="my_text" class="my_test"></textarea>
    </div>
    <div class='editors' id="termsy_master" style="display:none;">
        <h2>title</h2>
        <textarea name="" id="" class="sm">text</textarea>
        <textarea name="" id="" class="di">text</textarea>
    </div>
</div>

im trying

  • clone "termsy_master"
  • change id to "it"
  • change h2 heading to "new heading"
  • textarea sm id for "sm_new_id"
  • textarea di id to "di_new_id"
  • remove display none so that it is visible
  • and add it to the text of the article

I have already done the following, but I'm not sure how to proceed

$('.article-content').append($("#termsy_master").clone());
+5
source share
2 answers
$tmc = $("#termsy_master").clone().attr('id', 'his').show();
$("h2", $tmc).text('new title');
$(".sm", $tmc).attr('id', 'sm_new_id');
$(".di", $tmc).attr('id', 'di_new_id');
$tmc.appendTo(".article-content");

There are many ways you could do this, of course, but it seems more or less simple to me. Do not overdo it!

+16
source

Here is one possible solution:

var block = $("#termsy_master"​).clone();
block.children("h2").text("new title");
block.children(".sm").attr("id", "sm_new_id");
block.children(".di").attr("id", "di_new_id");
block.attr("id", "his").show().appendTo(".article-content");​

DEMO: http://jsfiddle.net/8pxPC/


, :)

$("#termsy_master").clone().attr("id", "his").show().appendTo(".article-content").children("h2").text("new title").siblings(".sm").attr("id", "sm_new_id").siblings(".di").attr("id", "di_new_id");​
+3

All Articles