Какой лучший способ динамически добавлять HTML с помощью JQuery? - PullRequest
Новая
       72

Какой лучший способ динамически добавлять HTML с помощью JQuery?

0 голосов
/ 27 ноября 2011

У меня есть следующий HTML-код: 

<div id="dynamicRadioButtons">



</div>

Используя jQuery, я бы хотел добавить переключатель с соответствующей меткой к приведенному выше div.Пример HTML-кода, который я хотел бы добавить, выглядит следующим образом: 

<input type="radio" id="dynamicRadio" name="radio" /><label for="dynamicRadio">My Label</label> <br>

Итак, допустим, у меня есть функция, которая вызывается, когда я что-то щелкаю, и получает идентификатор параметра (который является идентификаторомрадиокнопка, которая будет создана) и labelText (это текст метки, которая будет создана), я хочу иметь возможность сделать что-то вроде этого: 

function OnClick(id, labelText){

    // create a new radio button using supplied parameters
    var $newRadioBtn = $('<input />').attr({type="radio", id=id, name="radio"});

    // create a new radio button using supplied parameters
    // TODO - set the value of the label to parameter: labelText
    var $newLabel = $('<label />').attr({for=id});

    // TODO - append the new radio button and label to the div and then append <br>...
    $('#dynamicRadioButtons').append(/* The elements I want to append */);    
}

Может кто-нибудь помочь мне с моими битами TODO, пожалуйста?Я следовал примеру на этой странице , но просто недостаточно знаю о jQuery для добавления метки и т. Д. Также это лучший способ динамически добавлять элементы HTML?

1 Ответ

4 голосов
/ 27 ноября 2011

Вы можете обернуть ярлык вокруг элемента формы, а это значит, что вам не нужно быть слишком многословным. 

<label><input type="radio" id="dynamicRadio" name="radio" />
    My Label
</label>
<br />

И вы можете создать его так: 

function OnClick(id, labelText) {

    // create a new radio button using supplied parameters
    var newRadio = $('<input />').attr({
        type: "radio", id: id, name: id
    });

    // create a new radio button using supplied parameters
    var newLabel = $('<label />').append(newRadio).append(labelText);

    // append the new radio button and label
    $('#dynamicRadioButtons').append(newLabel).append('<br />');
}

Я использовал предоставленный идентификатор для имени и идентификатора, в противном случае все радиоприемники будут иметь имя «радио». Возможно, вы также захотите переименовать OnClick, поскольку есть встроенные обработчики событий с именем onclick, и это может вызвать путаницу.

Вот пример JS Fiddle

...