用jQuery添加HTML代码

Question

我有如下所示的HTML文档：

<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>

我需要的是动态地添加/删除<div class="conv"></div>元素。我知道我可以用jQuery做这件事，但找不到简单的解决方案。

有什么好主意吗？

Answer 1

你可以尝试使用

   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

要从DOM中删除元素，请执行以下操作：

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

要隐藏，而不是从DOM中删除：

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

在主div中的所有div末尾添加：

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

将两个div相加：

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

Answer 3

最简单的方法是使用$('div#conv0').html()函数。