Hey there, I'm having trouble inserting one DOM element into another. It's something I've done many times before successfully, but for some reason it's not working this time and I can't figure out why.
Currently, I am using an Ajax request to fetch my modal box and I'm using $.when to get two pages together. Below is the HTML code for the first part:
<div class="edit-modal">
<div class="edit-modal-title">
<h1>Settings</h1>
</div>
<div class="edit-modal-menu">
<ul class="list-inline">
<li><a href="#">Edit Form</a></li>
<li class="edit-active"><a href="#">Add People</a></li>
<li><a href="#">Form Info</a></li>
</ul>
</div>
<div class="edit-modal-content">
<!-- people -->
</div>
The second part looks like this:
<div class="form-group">
<label for="name">Form Name</label>
<input type="text" class="input-style form-control" id="name" placeholder="E-mail">
</div>
<div class="form-group">
<label for="ty">Thank You Page</label>
<input type="text" class="input-style form-control" id="ty" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> E-mail Notification
</label>
</div>
<button type="submit" class="save-button step-button">Save</button>
<a href="#" class="pull-right" style="text-decoration:underline; font-style:oblique;">delete form</a>
I simply want to place the second part inside the .edit-modal-content div.
Here's how I'm attempting it:
$(first[0]).find('.edit-modal-content').append(second[0]);
However, when I console.log($(first[0]), there is no sign of the second part in the .edit-modal-content. How can I resolve this issue?
Thanks!