Как получить documentElement.innerHTML в моей «динамической» таблице?

Question

Итак, я новичок в Javascript, и я пытаюсь получить исходный код моей текущей страницы со значениями в переменной.

Как вы можете видеть, в «myTable2» скрипт работает, и мы получаем разные значения в каждом из них. Но моя проблема в том, что я не могу получить «myTable1» ... Она просто не " t появится в окне. alert.

Чтобы получить строки в myTable1, у меня есть функция (addligne), которая просто принимает значения table2 в table1.

Заранее благодарен!

HTML:

<div id="liste_ingredient"> 

     <table id="myTable1"> 
      <tr> 
       <th>Nom ingredient</th> 
       <th>Code ingredient</th> 
       <th>Statut ingredient</th> 
       <th>Symbole ingredient</th> 
       <th>Suppression</th> 
      </tr> 

      <tr> 
      </tr> 
     </table> 

</div> 
</br></br></br> 
<div> 

     <table id="myTable2"> 
      <tr> 
       <th>Nom ingredient</th> 
       <th>Code ingredient</th> 
       <th>Statut ingredient</th> 
       <th>Symbole ingredient</th> 
      </tr> 

      <tr> 
       <td><input id="nom_ingredient" type="text" name="nom_ingredient" placeholder="Nom de l'ingrédient"/></td> 
       <td><input id="code_ingredient" type="text" name="code_ingredient" placeholder="Code de l'ingrédient"/></td> 
       <td><input id="statut_ingredient" type="text" name="statut_ingredient" placeholder="Statut de l'ingrédient"/></td> 
       <td><input id="symbole_ingredient" type="text" name="symbole_ingredient" placeholder="Symbole de l'ingrédient"/></td> 
      </tr> 
     </table> 
     </div> 

<button id="addligne">Add</button> 
<button id="getHTML">getHTML!</button> 

JS:

$('#getHTML').click(function() { 
    alert(document.documentElement.innerHTML); 
}); 

$('input').change(function() { 
    $(this).attr('value', $(this).val());    
}); 

$('#addligne').click(function() { 
    var table = document.getElementById("myTable1").tBodies[0]; 
    var nom_ingredient = document.getElementById("nom_ingredient").value; 
    var code_ingredient = document.getElementById("code_ingredient").value; 
    var statut_ingredient = document.getElementById("statut_ingredient").value; 
    var symbole_ingredient = document.getElementById("symbole_ingredient").value; 
    var row = table.insertRow(-1); 
    var cell1 = row.insertCell(0); 
    var cell2 = row.insertCell(1); 
    var cell3 = row.insertCell(2); 
    var cell4 = row.insertCell(3); 
    var cell5 = row.insertCell(4); 
    cell1.innerHTML = '<input type="text" name="nom_ingredient" value="'+ nom_ingredient +'"/>'; 
    cell2.innerHTML = '<input type="text" name="code_ingredient" value="'+ code_ingredient +'"/>'; 
    cell3.innerHTML = '<input type="text" name="statut_ingredient" value="'+ statut_ingredient +'"/>'; 
    cell4.innerHTML = '<input type="text" name="symbole_ingredient" value="'+ symbole_ingredient +'"/>'; 
    cell5.innerHTML = '<input type="button" value="Supprimer" onclick="deleteRow(this)">'; 

    document.getElementById("nom_ingredient").value = ""; 
    document.getElementById("code_ingredient").value = ""; 
}); 

http://jsfiddle.net/td8o348L/

PS: Я поставил минимум на этом jsfiddle

Answer 1

Изменить это:

alert(document.documentElement.innerHTML); 

Для этого:

alert($('html').html()); 

Рабочий пример:

http://jsfiddle.net/td8o348L/1/ (я использовал console.log так, что легче прочитать)