克隆PHP表单并追加到div

Question

I am trying to attach a long form (from external page) to a dynamically created Div using jQuery.

So Far i got this as jQuery:

<script>
    $('.add-player').click(function (e) {
        e.preventDefault(); 
        var id = $("#menuPlayers.nav-tabs li[role='presentation']").length+1;  with role = presentation
        var tabId = 'player_' + id;
        $(this).closest('li').before('<li role="presentation"><a href="#player_' + id + '" style="padding-top: 4px; padding-bottom: 4px;">' + id + '</a></li>');
        $('.tab-content').append('<div role="tabpanel" class="tab-pane" id="' + tabId + '">' + $("#cloneThisDiv").clone().appendTo("#" + tabId) + '</div>');
        $('#menuPlayers.nav-tabs li:nth(' + id + ') a').click();
    });
</script>

And as HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<legend> 
  <ul class="nav nav-tabs" role="tablist" id="menuPlayers">
  <li>Insert Players &nbsp;&nbsp;</li>
  <li role="presentation" class="active"><a href="#player_1" aria-controls="player_1" role="tab" data-toggle="tab">1</a></li>
  <li role="presentation"><a href="#player_2" aria-controls="player_2" role="tab" data-toggle="tab">2</a></li>
  <li role="presentation" ><a href="#player_3" aria-controls="player_3" role="tab" data-toggle="tab>3</a></li>
  <li><a href="#" class="add-player"> <b> + </b> </a></li>
  </ul>
</legend>

<div class="tab-content">

<div role="tabpanel" class="tab-pane" id="player_1">
    ... PHP LONG FORM that i want to clone to the new div created with jQuery...
</div>

<div role="tabpanel" class="tab-pane" id="player_2">
 Tab2
</div>

<div role="tabpanel" class="tab-pane" id="player_3">
 Tab 3  
</div>

</div>

But i can't reach what i am looking for... Using this line $("#cloneThisDiv").clone().appendTo("#" + tabId) it returns [object Object] when new tab is created.
Is there another way i can clone my form, everytime user want to add a new player, without using the whole code?

Answer 1

have you tried like this:

var form = $("#cloneThisDiv").clone();
$("#"+tabId).append(form);

Answer 2

The appendTo method returns a domNode so you can't use it as a string inside the append method.

Try this code:

<script>
$('.add-player').click(function (e) {
    e.preventDefault(); 
    var id = $("#menuPlayers.nav-tabs li[role='presentation']").length+1;  with role = presentation
    var tabId = 'player_' + id;
    $(this).closest('li').before('<li role="presentation"><a href="#player_' + id + '" style="padding-top: 4px; padding-bottom: 4px;">' + id + '</a></li>');
    var newPlayerTab = $('.tab-content').append('<div role="tabpanel" class="tab-pane" id="' + tabId + '"></div>');
    $("#cloneThisDiv").clone().appendTo($(newPlayerTab));

    $('#menuPlayers.nav-tabs li:nth(' + id + ') a').click();
});

Answer 3

I think you just need to use .html() instead of using .clone().appendTo(

 $('.add-player').click(function (e) { e.preventDefault(); var id = $("#menuPlayers.nav-tabs li[role='presentation']").length+1; //with role = presentation var tabId = 'player_' + id; $(this).closest('li').before('<li role="presentation"><a href="#player_' + id + '" style="padding-top: 4px; padding-bottom: 4px;">' + id + '</a></li>'); $('.tab-content').append('<div role="tabpanel" class="tab-pane" id="' + tabId + '">' + $("#player_1").html() + '</div>'); $('#'+tabId).find('.form').find('h3').text(tabId); $('#menuPlayers.nav-tabs li:eq(' + id + ') a').click(); }); $('#menuPlayers').on('click' , 'li a:not(.add-player)',function(){ $('.tab-pane').hide(); $($(this).attr('href')).show(); }).find('a[href="#player_1"]').click(); 

 .form{ background : #005eff; padding : 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <legend> <ul class="nav nav-tabs" role="tablist" id="menuPlayers"> <li>Insert Players &nbsp;&nbsp;</li> <li role="presentation" class="active"><a href="#player_1" aria-controls="player_1" role="tab" data-toggle="tab">1</a></li> <li role="presentation"><a href="#player_2" aria-controls="player_2" role="tab" data-toggle="tab">2</a></li> <li role="presentation" ><a href="#player_3" aria-controls="player_3" role="tab" data-toggle="tab">3</a></li> <li><a href="#" class="add-player"> <b> + </b> </a></li> </ul> </legend> <div class="tab-content"> <div role="tabpanel" class="tab-pane" id="player_1"> <form class="form"> <h3>Player_1</h3> <input type="text" /><br/> <input type="text" /><br/> <textarea></textarea> </form> </div> <div role="tabpanel" class="tab-pane" id="player_2"> Tab2 </div> <div role="tabpanel" class="tab-pane" id="player_3"> Tab 3 </div> </div>