I currently have multiple pages structured like this:
<body>
<table><tr><td align="center" width="100%">
--PAGE HTML--
</td></tr></table>
</body>
For a temporary period, I need to change the structure of these pages to the following format:
<body>
<div style="width: 100%; min-height: 960px; text-align: center;">
--PAGE HTML--
</div>
</body>
To accomplish this task, I have decided to utilize jQuery.
Below is the code that I am using:
$(document).ready(function(){
var PageHtml = $("td:first").html();
$("table:first").remove();
console.log(PageHtml);
$("body").html('<div style="width: 100%; min-height: 960px; text-align: center;">'+PageHtml+'</div>');
});
Despite my efforts, I am encountering an issue where the result is not as expected.
<body>
<div style="width: 100%; min-height: 960px; text-align: center;"></div>
</body>
(The page html content is not appearing inside the div element)
In order to diagnose the problem, I added console.log(PageHtml); which outputs the correct HTML string.
At this point, I am unsure how to proceed and would appreciate any suggestions or help.
Thank you for your assistance.