Вставить строку как элементы в DOM для JavaScript?

Question

У меня есть тестовый фрагмент HTML, например: *

HTML - это строка, а не элемент DOM, но я пытаюсь выяснить, есть ли способ или подход, который можно использовать для вставки строки в качестве DOM, чтобы ее можно было добавить в DOM .

var test='<tr class="rowHeaders">';
test=test+'<td id="sTD" name="sTD" width="4%">test.php</td>'
test=test+'<td width="2%"><input type="radio" name="tb" ></td>';
test=test+'<td id="tTD" name="tTD" width="2%">php</td>';
test=test+'<td width="2%"><input type="button" name="vv" ></td>';
test=test+'</tr>';


var scriptTBL=document.getElementById("scriptsT");

scriptTBL.children[0].appendChild(test);

Попытка сделать что-то подобное ...

Но «тест» не является действительным узлом или элементом, так как я могу добавить его к элементу ??

Я думал об использовании innerHtml, но уже мог существовать дочерний элемент для table / tbody для DOM.

Я изучал фрагменты, но это не щелкает!

Тестовый HTML имеет табличку:

<table id="scriptsT" name="scriptsT" >
  <tr>
    .
    .

Указатели или мысли будут с благодарностью.

Спасибо.

Answer 1

Вы можете добавить к innerHTML:

scriptTBL.tBodies[0].innerHTML += test;

---

foo += bar - сокращение от foo = foo + bar. Вы также можете упростить ваш код создания HTML таким образом. Используйте test += 'html here';.

appendChild принимает только элемент DOM.

Answer 2

Создайте div (или span или что-то еще) и загрузите ваш фрагмент с помощью innerHTML.

var someDiv = document.createElement("div");
someDiv.innerHTML = "<tr ....  ";
someParentElement.appendChild(someDiv);

Answer 3

Вы можете сделать что-то вроде этого:

var test = '<tr class="rowHeaders">';
test = test + '<td id="sTD" name="sTD" width="4%">test.php</td>'
test = test + '<td width="2%"><input type="radio" name="tb" ></td>';
test = test + '<td id="tTD" name="tTD" width="2%">php</td>';
test = test + '<td width="2%"><input type="button" name="vv" ></td>';
test = test + '</tr>';

var discardableElement = document.createElement("div");
discardableElement.innerHtml = test;

var scriptTBL = document.getElementById("scriptsT");
scriptTBL.tBodies[0].appendChild(discardableElement.firstChild);

Это немного расточительно, поскольку вы создаете элемент DOM (что является дорогостоящей операцией) только для его удаления, но при этом создаются элементы DOM, позволяющие использовать метод appendChild.

В качестве альтернативы, вы можете использовать конкатенацию строк для использования свойства innerHtml, например:

var test = '<tr class="rowHeaders">';
test = test + '<td id="sTD" name="sTD" width="4%">test.php</td>'
test = test + '<td width="2%"><input type="radio" name="tb" ></td>';
test = test + '<td id="tTD" name="tTD" width="2%">php</td>';
test = test + '<td width="2%"><input type="button" name="vv" ></td>';
test = test + '</tr>';


var scriptTBL = document.getElementById("scriptsT");

// Insert at the BOTTOM of the table
var newHtml = scriptTBL.innerHtml + test;

// OR... Insert at the top of the table
//var newHtml =  test + scriptTBL.innerHtml;

scriptTBL.tBodies[0].innerHtml = newHtml; 

РЕДАКТИРОВАТЬ: Обновлено на основе комментария @ Зак.