Динамическое создание элемента и реализация класса в javascript

У меня проблема с динамическим созданием элемента в javascript с innerHTML. Вот код:Динамическое создание элемента и реализация класса в javascript

var newElement = document.createElement("tr"); 
newElement.innerHTML = ['<td><a href="javascript:void(0);">Test Suite</a></td><td>4,977</td><td class="text-align-center">', 
         '<div class="sparkline txt-color-blue text-align-center" data-sparkline-height="22px" data-sparkline-width="90px" data-sparkline-barwidth="2">2700, 3631, 2471, 1300, 1877, 2500, 2577, 2700, 3631, 2471, 2000, 2100, 3000</div>', 
      ].join('\n'); 

$("#locationsGraph").append(newElement);

Проблема заключается в том, что элемент создается только правом, но класс элемента не реализован.

С этой частью:

class="sparkline txt-color-blue text-align-center" data-sparkline-height="22px" data-sparkline-width="90px" data-sparkline-barwidth="2"

я должен получить гистограмму, но вместо этого я получаю тот же список номеров.

Это что-то с реализацией класса в innerHTML или что? Я также попытался вручную создать все элементы и присвоить className, но результат был тот же

источник

2015-01-14 autodev101

Предположительно, что когда-нибудь вы используете, чтобы создать график не работает на вновь созданный элемент. Вероятно, вам нужно снова позвонить ему, чтобы преобразовать DOM в фактический график. –

Как именно эти числа образуют «гистограмму»? Вероятно, вам нужно вызвать какой-то метод для этого ... – haim770

Это просто демо для встроенного barGraph, эти числа являются случайными числами для баров. – autodev101

Согласно the docs, вам необходимо запустить $(newElement).find('div').sparkline().

источник

2015-01-14 15:09:54

hugay success :)) Спасибо, человек, я новичок в javascript/jquery, и мне не пришло в голову проверить документацию для sparkline. – autodev101

@ autodev101: В будущем вы обнаружите, что получите лучшие результаты, если вы включите в вопрос * информацию, например, какие инструменты вы используете (например, искры) *. –

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

Вы не имеете закрывание, чтобы соответствовать вашим

newElement.innerHTML = ['<td><a href="javascript:void(0);">Test Suite</a></td><td>4,977</td><td class="text-align-center">', 
         '<div class="sparkline txt-color-blue text-align-center" data-sparkline-height="22px" data-sparkline-width="90px" data-sparkline-barwidth="2">2700, 3631, 2471, 1300, 1877, 2500, 2577, 2700, 3631, 2471, 2000, 2100, 3000</div>', 
      '</td>' //this is missing 
    ].join('\n');

источник

2015-01-14 15:30:30 sabkaraja

Динамическое создание элемента и реализация класса в javascript

ответ

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