在javascript中动态创建元素和类实现

Question

I have problem with dynamic creation of element in javascript with innerHTML. Here is the code:

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

The problem is that the Element is created just right, but the element class is not implemented.

With this part:

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

I should get a bar graph, but instead I get the same list of numbers.

Is it something with the implementation of the class in innerHTML or what? I also tried manually creating all elements and assigning className but the result was the same

Answer 1

根据文档 ，您需要运行$(newElement).find('div').sparkline() 。

Answer 2

You dont have a closing to match your

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