jQuery - создание элементов внутри таблицы

Question

Я пытаюсь динамически создать флажок, кнопка & 2 Ящики ввода внутри таблицы с помощью jQuery. Ниже мой код jQuery, его создание элементов, но не создание столбцов должным образом. Что мне не хватает?

var contentTblOpen = "<table border='4'>"; 
     var contentTblClose = "</table>"; 
     var contentTrOpen = "<tr>"; 
     var contentTrClose = "</tr>"; 
     var contentTdOpen = "<td>"; 
     var contentTdClose = "</td>"; 


     $("#Quote" + id).after(

      contentTblOpen 
     ).append(
      contentTrOpen 
     ).append(
      contentTdOpen 
     ).append(
     $(document.createElement("input")).attr({ 
      id: 'RL_' + rLCount + '__Delete' 
     , name: 'RL[' + rLCount + '].Delete' 
     , type: 'checkbox' 
     , checked: false 
     }) 
     .click(function (event) { 
      var cbox = $(this)[0]; 
      alert(cbox.value); 
     }) 
     ).append(
     $(document.createElement("input")).attr({ 
      id: 'Line' + rLCount 
     , name: 'Line' + rLCount 
     , value: 'Line' + rLCount 
     , class: 'ClsrLButton' 
     , type: 'button' 
     }) 
     ).append(
      contentTdClose + contentTdOpen 
     ).append(
     $(document.createElement("input")).attr({ 
      id: 'RL_' + rLCount + '__TextLine' 
     , name: 'RL[' + rLCount + '].TextLine' 
     , value: 'RL_' + rLCount + '__TextLine' 
     , type: 'input' 
     }) 
     ).append(
      contentTdClose + contentTdOpen 
     ).append(
     $(document.createElement("input")).attr({ 
      id: 'RL_' + rLCount + '__Amount' 
     , name: 'RL[' + rLCount + '].Amount' 
     , value: 'RL[' + rLCount + '].Amount' 
     , type: 'input' 
     }).append(
      contentTdClose + contentTrClose + contentTblClose 
     ) 
     ); 

Answer 1

Вместо того чтобы делать серию append создать длинную строку (что-то вроде):

'<table><tr><td><input id="RL_0__Delete" name="RL[0].Delete" type="checkbox">...'

var newTable = contentTblOpen 
       + contentTrOpen 
       + contentTdOpen 
       + "<input " + "id='RL_" + rLCount + "__Delete'" + "type='checkbox' >" 

и добавьте эту строку.

BTW, манипулирование DOM довольно медленно, поэтому, если вы создаете строку и добавляете все за один раз, вы выигрываете несколько миллисекунд.

Answer 2

Главное, что при каждом звонке .append() браузер создаст действительный DOM. Поэтому, как только вы вставляете <tr> без </tr>, браузер вставляет </tr> для вас, и результат будет действительным DOM, но это будет не то, что вы изначально планировали.

Пожалуйста, проверьте ответ strah, он должен вам помочь.