InnerHTML and jqueries.html () ... GOTCHA! any proper work around?

Question

innerHTML and jqueries.html () ... GOTCHA!

I just created a small html tag template for my javascript to get a copy and paste into a table ... It looked like this:

<div id="TimesheetEntryRow">
            <tr id="row{RowID}">
               <td></td>
            </tr>
</div >

So, in jquery, I thought, cool, that's enough:

timesheetTemplateHtml = $( "#TimesheetEntryRow" ).html();

and then I added it to my amazing table:

$( "#TimesheetTable" ).append( timesheetTemplateHtml );

It didn’t work?

He deleted <tr>and <td>left true tags, such as <input />those that I had inside.

So, I thought: oh jquery, you are a naughty little critter, I will use innerHTML so I don't have to worry about jQuery being smart:

timesheetTemplateHtml = document.getElementById( "TimesheetEntryRow" ).innerHTML;
document.getElementById( "TimesheetTable" ).innerHTML += timesheetTemplateHtml;

Still not working? However, he removed all the tags for my template ...

I tore the damn out of myself and stumbled upon these two articles:

FIREFOX: https://developer.mozilla.org/en-US/docs/Web/API/element.innerHTML?redirectlocale=en-US&redirectslug=DOM%2Felement.innerHTML

IE: http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx

, , , , . , , , Chrome ( , - ).

, , , ... , .

<div id="TimesheetEntryRow">
            <table>
                <tr id="row{RowID}">
                   <td></td>
                </tr>
            </table>
</div>

, , innerHTML html, , ... - templater?

!

:

• IE + jQuery + Ajax + XHTML: HTML .html() .innerHTML

---

:

<div id="TimesheetEntryRow" style="display:none;">
    <table>
        <tbody>
            <tr id="row{RowID}">
                <td>blah</td>
                <td class="timeSpent"><input name="timeMon[]" type="text" class="form-control inputTimeSpent timeSpent timeMon" placeholder="0" /></td>
                <td class="timeSpent"><input name="timeTue[]" type="text" class="form-control inputTimeSpent timeSpent timeTue" placeholder="0" /></td>
                <td class="timeSpent"><input name="timeWed[]" type="text" class="form-control inputTimeSpent timeSpent timeWed" placeholder="0" /></td>
                <td class="timeSpent"><input name="timeThur[]" type="text" class="form-control inputTimeSpent timeSpent timeThur" placeholder="0" /></td>
                <td class="timeSpent"><input name="timeFri[]" type="text" class="form-control inputTimeSpent timeSpent timeFri" placeholder="0" /></td>
                <td class="timeSpent timeSpentWeekend"><input name="timeSat[]" type="text" class="form-control inputTimeSpent timeSpent timeSat" placeholder="0" /></td>
                <td class="timeSpent timeSpentWeekend"><input name="timeSun[]" type="text" class="form-control inputTimeSpent timeSpent timeSun" placeholder="0" /></td>
                <td class="timeSpent"><input disabled type="text" class="form-control timeSpent allocated" /></td>
                <td class="timeSpent"><input disabled type="text" class="form-control timeSpent total" value="0" /></td>
                <td><textarea name="note[]" class="form-control inputNotes" placeholder="Enter notes"></textarea></td>
            </tr>
        </tbody>
    </table>
</div>

. , : css.

, , , ( , , , , )

Answer 1

, , , HTML. <tr> <table>, <tbody>, <thead>, <tfoot> , , - , . <tr> , , , . ( <td> <tr> s.) a <table>:

<table id="TimesheetEntryRow" style="display:none">
    <tr>
        <td>blah</td>
    </tr>
</table>

. : http://jsfiddle.net/6GSJ4/2/

, , AngularJS ( ), <script type="text/template">, DOM HTML, . , ( .innerHTML ).

Answer 2

, , html . , .

timesheetTemplateHtml = $("#TimesheetEntryRow").html();

$("#TimesheetEntryRow").html(timesheetTemplateHtml);

Answer 3

. , :

<table id="TimesheetEntryRow" style="display: none;">
  <tr>
    <td>aaa</td>
  </tr>
</table>

, . :

$(function(){

  var $table = $( "#TimesheetTable" );
  var $row = $( "#TimesheetEntryRow tr" );

  $('#button').on('click', function(){
    $table.append($row.clone());
  });

});

. : http://codepen.io/timbuethe/pen/czJla/

Answer 4

" " script :

<script type="text/template" id="TimesheetEntryRow">
    <tr id="row{RowID}">
        <td></td>
    </tr>
</script>

Some JavaScript scripts use this, for example. Underscore.js