Как сгенерировать html с помощью создания/добавления элементов jQuery?

Мне нужно сгенерировать HTML для флажка. Я произвожу флажок, используя следующую функцию, которая использует JS конкатенации для генерации большого блока HTML:Как сгенерировать html с помощью создания/добавления элементов jQuery?

function getColvisCheckboxHTML(){ 
// Generates the html for the checkboxes in the column visibility modal 
var checkboxes = ''; 
var tableheaders = table.columns().header(); 
for(var i = 1;i < tableheaders.length;i++){ 
    var colindex = tableheaders[i-1].getAttribute('data-column-index'); 
    var colname = tableheaders[i-1].getAttribute('aria-label').split(':')[0]; 
    // Don't include ID column, this column should always be visible 
    if(colname != 'ID'){ 
     checkboxes += '<label class="col-md-2 checkbox-inline"><input type="checkbox" value="' + 
      colindex + '">' + colname + '</label>'; 
    } 
    // Display flags in rows of 5 
    if(i%6==0){ 
     checkboxes += '<br />'; 
    } 
}; 
return checkboxes; 
};

Функция затем вызывается с помощью этого кода в пределах Ajax вызова:

$('#colvis_chkboxes').html(getColvisCheckboxHTML());

Я сообщил, что способ, с помощью которого я генерирую HTML, является неправильным методом, и что я должен использовать создание/добавление элемента jQuery вместо этого для удобочитаемости. Мой вопрос в том, как выглядит мой код с помощью этого метода? Я начал пробовать этот другой метод, но это все, что я мог придумать:

$('<label>', { 
    "class": "col-md-2 checkbox-inline" 
}).append(
    $('<input/>', { 
     "type": "checkbox"

Любые советы было бы удивительным. Благодаря!

источник

2015-11-18 pcain

Ваш оригинальный способ, вероятно, более производительным, но с помощью JQuery сделать это может быть более удобным для чтения. Мне не очень нравится, как вы это делаете. –

Лично я бы, наверное, сделал это не так. Я бы подумал об использовании каких-то шаблонов, таких как jsrender, которые помогут вам разделить разметку с вашей бизнес-логикой. – dman2306

Попробуйте взглянуть на эту документацию: http://api.jquery.com/append/

Также в вашем образце вы можете иметь что-то вроде этого:

$("label.col-md-2 checkbox-inline").append("YOUR HTML HERE");

Надежда, что помогает.

источник

2015-11-18 20:31:03 mCube

http://api.jquery.com/append/ - первая документация, которую я прочитал, прежде чем я даже попытался изменить или опубликовал свой первоначальный вопрос. Меня все еще путают с исполнением. – pcain

Каков ваш ожидаемый результат после его реализации? – mCube

Мой ожидаемый результат должен представлять собой группу флажков с именем столбца в качестве метки. Эти флажки должны отображаться в текстовом окне html. Html для модального всплывающего окна уже установлен. Мне просто нужны флажки и их ярлыки, чтобы они отображались внутри. – pcain

From w3: Сама метка может быть расположена до, после или вокруг соответствующего элемента управления.

<label for="lastname">Last Name</label> 
<input type="text" id="lastname" />

Попробуйте с:

var container = $('<div>'); 
container.append('<label class="col-md-2 checkbox-inline"></label>); 
container.append('<input type="checkbox" name="my_name" />); 
// OR 
var container = $('<div>'); 
$('<input />', { type: 'checkbox', id: 'cb_id', value: name }).appendTo(container); 
$('<label />', { 'for': 'cb_id', text: name, class: 'col-md-2 checkbox-inline' }).appendTo(container);

источник

2015-11-18 20:41:15 Yuri

Вместо определения и добавления разметки в виде строки, вы можете добавить атрибуты и стили, используя $(jquery) выражение. Это устранит проблемы с экранирующими символами или любые проблемы с синтаксисом.

var ele = $('<input>').addClass("green").attr("value","test").css("color","green"); 
$('div').append(ele);

Вот пример: https://fiddle.jshell.net/a2n234eq/5/

источник

2015-11-18 20:47:28 DinoMyte

Как сгенерировать html с помощью создания/добавления элементов jQuery?

ответ

Смежные вопросы