JSFiddle - React, Tailwind, and code Playground

by jimp

JavaScript

// Test innerHTML with invalid content.
// Observed Result: The <span> tags are moved outside of the <table> tag.
var html =
'<table id="table1" border="1">' +
'<tbody>'+
'<span>innerHTML Implicit Row</span>' +
'<tr>' +
'<span>innerHTML Implicit Cell</span>' +
'<td>' +
'TEST'
'</td>' +
'</tr>' +
'</tbody>'+
'</table>';
//document.documentElement.innerHTML = html;
document.documentElement.insertAdjacentHTML('afterbegin',html);

// Now append a <span> within the table's <tbody> node.
// Observed Result: The <span> tags are created within the <tbody> tag.
var tableNode = document.getElementById('table1');
var tbodyNode = tableNode.childNodes[0];
var spanNode  = document.createElement('span');
spanNode.innerText = 'JS Implicit Row?';
tbodyNode.appendChild(spanNode);

// Finally append a <span> with insertAdjacentElement()
tbodyNode.insertAdjacentHTML('afterbegin','<span>insertAdjacentElement Implicit Row</span>');