Adding HTML code with jQuery

Question

I have HTML document that looks like below:

<td class="half-wide" id="converters" >
 <h3>Konwertery</h3>
 <div class="conv" id="conv0">
 <label for="Converter__0">Converter #0</label>
 <label class="smaller" for="Converter">Converter</label>
 <input id="ExportConverters_0__Converter" name="ExportConverters[0].Converter" type="text" value="forward study to TRANSMEDICOM" />
 <label class="smaller" for="Modality">Modality</label>
 <input id="ExportConverters_0__Modality" name="ExportConverters[0].Modality" type="text" value="CR" />
 </div>
 <div class="conv" id="conv1">
 <label for="Converter__1">Converter #1</label>
 <label class="smaller" for="Converter">Converter</label>
 <input id="ExportConverters_1__Converter" name="ExportConverters[1].Converter" type="text" value="forward study to TRANSMEDICOM" />
 <label class="smaller" for="Modality">Modality</label>
 <input id="ExportConverters_1__Modality" name="ExportConverters[1].Modality" type="text" value="DR" />
 </div>
 <div class="conv" id="conv2">
 <label for="Converter__2">Converter #2</label>
 <label class="smaller" for="Converter">Converter</label>
 <input id="ExportConverters_2__Converter" name="ExportConverters[2].Converter" type="text" value="forward study to TRANSMEDICOM" />
 <label class="smaller" for="Modality">Modality</label>
 <input id="ExportConverters_2__Modality" name="ExportConverters[2].Modality" type="text" value="DX" />
 </div>
</td>

What I need is adding/removing <div class="conv"></div> elements dynamically. I know I can do it with jQuery but cannot find simple solution to do it.

Has anyone good idea to do that?

• Rohit416: adding/removing <div class="conv" id="conv0"> elements dynamically, on which event ??

Answer 1

You can try using

 function addDiv(i){
 var html = ['<div class="conv" id="conv'+i+'">',
 '<label for="Converter__'+i+'">Converter #'+i+'</label>',
 '<label class="smaller" for="Converter">Converter</label>',
 '<input id="ExportConverters_'+i+'__Converter" name="ExportConverters['+i+'].Converter" type="text" value="forward study to TRANSMEDICOM" />',
 '<label class="smaller" for="Modality">Modality</label>',
 ' <input id="ExportConverters_'+i+'__Modality" name="ExportConverters['+i+'].Modality" type="text" value="CR" />',
 '</div>'].join(" ");
 return html;
 }
 for(i=0; i<3; i++){
 $('#converters').append(addDiv(i));
 }

Answer 2

To remove element form DOM:

$('#conv0').remove();

To hide, not remove from DOM:

$('#conv0').hide();

To add at the end of all divs within a main div:

$('#converters').append('<div class="conv" id="conv0">...</div>');

To add in between two divs:

 $( "#conv0").after( "<div class="conv" id="conv1">...</div>" );

Answer 3

The easiest way is using $('div#conv0').html() function

Answer 4

there are many ways to do it, depends on how and where you want to place the content, for example

.insertAfter()
.insertBefore()
.append()
.appendTo() 
.html()

for removing you can use

.remove()

Visit the link to LEARN MORE

Answer 5

For removing;

$(".conv").empty();
$(".conv").remove();
$(".conv").detach();

This will result in the DOM structure with conv0 id to be deleted. If there are any number of nested elements inside this div, they will also be removed if you use empty(). Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

For adding:

$(".conv").append();
$(".conv").prepend();

The .append() method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first child, use prepend()).