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?

adding/removing <div class="conv" id="conv0"> elements dynamically, on which event ?? — Rohit416
– Rohit416, Commented Apr 16, 2015 at 9:03

Sagar Khatri · Accepted Answer · 2015-04-16 09:11:26Z

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));
    }

answered Apr 16, 2015 at 9:11

Sagar Khatri

1,0148 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Godwin · Accepted Answer · 2015-04-16 09:07:34Z

1

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>" );

answered Apr 16, 2015 at 9:07

Godwin

5224 silver badges14 bronze badges

Comments

Ringo · Accepted Answer · 2015-04-16 08:58:56Z

0

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

answered Apr 16, 2015 at 8:58

Ringo

3,9873 gold badges25 silver badges38 bronze badges

Comments

Kalish · Accepted Answer · 2015-04-16 09:01:28Z

0

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

answered Apr 16, 2015 at 9:01

Kalish

8332 gold badges9 silver badges18 bronze badges

Comments

Kurenai Kunai · Accepted Answer · 2015-04-16 09:11:25Z

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()).

Collectives™ on Stack Overflow

Adding HTML code with jQuery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related