Добавить html с javascript

Question

Мне нужно добавить строки в таблицу на пользовательский ввод/выбор. Невозможно использовать jQuery, Mootools 1.3.2 в порядке.

У меня есть поле <select id="copy_selected" class="select" onchange="add_copy()" >, которое onchange выполняет функцию add_copy.

HTML, является (Fiddle here)

<table> 
<tr> 
    <td class="side" id="copy_settings_desc">Wich to copy?</td> 
    <td> 
     <select id="copy_selected" class="select" onchange="add_copy()"> 
      <option value="0">test 1</option> 
      <option value="1">test 2</option> 
     </select> 
    </td> 
</tr> 
<tr id="copy_expandable"></tr> 

и не работает скрипт:

var copy_counter = 0; 

function add_copy() { 
copy_counter = copy_counter + 1; 
var addition_text = document.getElementById('copy_selected').options[document.getElementById('copy_selected').selectedIndex].text; 
var addition_id = document.getElementById("copy_selected").value; 
new_addition = '<td></td>' + '<td></td>' + '</tr><tr>' + 
    '<td class="side">' + document.getElementById("copy_settings_desc").innerHTML + '</td>' + 
    '<td>' + addition_text + 
    '<input type="hidden" name="copy_to[copy_counter]" value=' + addition_id + '>' + 
    '</td>'; 
document.getElementById("copy_expandable").innerHTML = document.getElementById("copy_expandable").innerHTML + new_addition; 
} 

Я понимаю, писать HTML с помощью сценария не является хорошей практикой. (и в этом случае даже не работает)

Что было бы хорошим способом сделать это? Спасибо.

EDIT: фиксированный конкатенация (спасибо, что указав). Можете ли вы заметить, что линия <tr></tr> игнорируется при каждом новом выборе? Зачем?

Answer 1

Ваша проблема заключается в том, что у вас есть синтаксические ошибки при определении строки HTML (они не очень сцеплены), this - это ваша скрипка, обновленная и работающая!

Строки в JS не может быть на несколько строк, вы должны использовать + оператора Concat их, или вы можете даже использовать \ определить несколько строк строки, это пример:

var myString = 'this is\ 
       a string\ 
       on multiple line!'; 

EDIT : по вашему запросу, с this JSFiddle ваш код работает. Я изменил идентификатор таблицы, чтобы вы могли добавить HTML до конца с element.insertAdjacentHTML()function(MDN Reference). Стиль вашего кода немного изменился, но я думаю, что это то, что вы хотите, поэтому проверьте его!

Answer 2

Изменен ваш скрипт, теперь он работает: http://jsfiddle.net/5yKDP/2/
Постарайтесь быть более внимательными при конкатенации строк. И посмотрите на консоль, чтобы узнать, есть ли в вашем скрипте какие-либо ошибки.
Если вы ищете многострочные строки в ваших скриптах, рассмотрите писать такой код:

var multiline = "i\ 
       have two lines" 

Answer 3

Если вы хотите, чтобы создать элементы, это хорошая практика никогда не добавлять сам HTML-кода. Скорее, вы должны использовать функции JavaScript и позволить ему управлять DOM для вас.

В вашем конкретном случае, создание новых строк и ячеек может быть достигнуто за счет сочетания document.createElement(), document.createTextNode()table.insertRow(), row.insertCell(), node.appendChild() и другие функции:

var table = document.getElementById('myTable'); // get table 
var row = table.insertRow(table.rows.length); // insert row at the end 

var cellA = row.insertCell(0); // create cell 
var textA = document.createTextNode('<p>text</p> A'); // <p> will not render as 
cellA.appendChild(textA);        // HTML, but as if it were 
                 // escaped text like &gt; 
var cellB = row.insertCell(1); 
var textB = document.createTextNode('text for column B'); 
cellB.appendChild(textB); 

var myInput = document.createElement("input"); // create <input> 
myInput.type = "text";       // set input's attributes 
myInput.name = "myInput"; 
myInput.value = 'my DOM created Input'; 
cellB.appendChild(myInput);     // appends <input> to cell 

Это довольно просто и надежно. Check out a fiddle вашего кода, используя это.