How to append div in existing div?

Question

Hello I am creating website using php.In that i have one form which is for add appointment. in that page user can fillup date, start Time and End time of appointment. but if user want to add extra date and time he/she can also add. for that i have write following code.

   <div id="date">
   <table>
   <tr>
   <td>
   Date<br>
   <input type="text" id="dateid">
   </td>
   <td>startTime:<select><option value="00:00">00:00</option></select></td>
   <td>EndTime:<select><option value="00:00">00:00</option></select></td>
   <td><input type="button" value="Extra Time" onClick="addTime()"></td>
   </tr>
   </table>
    </div>

for onlick event i have create on function.

   <script>
   function addTime() 
{
var timeDiv='<div id="extraTimeDiv"><table><tr><td>Date<br><input type="text" id="extradate"></td><td >Start Time</td><td><select id="addstart" name="addstart"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option> EndTime:</td><td ><select id="addend" name="addend"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option></select></td><td></td></tr></table></div>'

   var div = document.getElementById('date');
div.innerHTML = div.innerHTML + timeDiv;

  }
</scritp>

this works fine but when when i click on more then previous selected data erased. data should be as it is when i press more to add extra time. kidnly help me how to solve this problem? Thank you in advance.

@Mooseman .. i am writing only this code. tell me how to do this? — Java Man, Oct 03 '13 at 12:22
@epascarello It's invalid to have multiple elements with the same `id`, but `$('div#date')` and `$('input#date')` could be used. — Mooseman, Oct 03 '13 at 12:24
@Mooseman. i have changed id of text box. thats not required — Java Man, Oct 03 '13 at 12:26
@epascarello Not as far as I know, but the selection would succeed. — Mooseman, Oct 03 '13 at 12:26
@kapil Leaving `id=` is invalid. Just remove the attribute entirely. — Mooseman, Oct 03 '13 at 12:26
kindlly tell me how to append Div? my filledup data should be remain as it is — Java Man, Oct 03 '13 at 12:28
AKA: This is not Ajax, I do not see the XMLHttpRequest object being used here. — epascarello, Oct 03 '13 at 12:32
@epascarello thank you.. no need to use AJAx... i got the Solution — Java Man, Oct 03 '13 at 12:36
And too bad the solution you picked does not explain why it happens. lol — epascarello, Oct 03 '13 at 12:38
@epascarello i use $("#date").append(timeDiv); and i got the solution but one more thing when i press more button it append new div which have two drop down.second time i press button at that time it append new div but id remain same of all dropdown. i got value of last append div. i want to all value — Java Man, Oct 03 '13 at 12:51

score 2 · Answer 1 · answered Oct 03 '13 at 12:28

The problem here is innerHTML does not remember values. You should not be using innerHTML to add new content if you need to maintain state. You need to use appendChild.

function addTime() {    
    var timeDiv='<table><tr><td>Date</td></tr></table>';
    var div = document.createElement("div");
    div.innerHTML = timeDiv;
    document.getElementById('date').appendChild(div);
}

Now since you labeled it jQuery it is as simple as

function addTime() {    
    var timeDiv='<div><table><tr><td>Date</td></tr></table></div>';
    $("#date").append(timeDiv);
}

Now if you keep calling addTime you will be adding multiple elements with the same id. You might want to either drop the ids or add a counter to the ids.

score 1 · Accepted Answer · answered Oct 03 '13 at 12:23

you can use clone method for ex : this example is for a tr to append on table whose id is vtable.

$(document).ready(function () {
    $("#more").click(function() {
      $(".vtable tr:last").clone().find("input, select").each(function(){}).end().appendTo(".vtable");
    });
});

where more is the id of button clicked to create div. Please note this is for demonstration purpose

also as per your question your previous data is erasing bcoz you are using + to insert html in your code rather than this you need to use append or clone method so it will always append the data at the end, also you can pass different ids to each html appended.

score 0 · Answer 3 · answered Oct 03 '13 at 12:21

jQuery is a good way to do this:

<script>
  var timeDiv='<div id="extraTimeDiv"><table><tr><td>Date<br><input type="text" id="extradate"></td><td >Start Time</td><td><select id="addstart" name="addstart"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option> EndTime:</td><td ><select id="addend" name="addend"><option value="00:00"> 00:00</option><option value="00:30"> 00:30</option><option value="01:00"> 01:00</option><option value="01:30"> 01:30</option><option value="02:00"> 02:00</option></select></td><td></td></tr></table></div>'

  var div = $('div#date');
  div.append(timeDiv);

}

score 0 · Answer 4 · answered Oct 03 '13 at 12:29

0

Try changing

div.innerHTML = div.innerHTML + timeDiv;

to

$('#date').append(timeDiv);

for more detail checkout the following link

http://api.jquery.com/append/

answered Oct 03 '13 at 12:29

Nibin

3,922
2
20
38

How to append div in existing div?

4 Answers4