Skip to content

Instantly share code, notes, and snippets.

Last active May 23, 2022 06:47
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
A short script to extract the head and body contents from an HTML file to reformat it
* Extract HTML children of a give tag name from a given document.
* @param \DOMDocument $doc The DOM document to extract from.
* @param string $tagName The tag name for extraction (e.g. 'head', 'body')
* @return \DOMDocument An DOMElement containing all child elements from the tag specified in $dom.
function extractChildrenFrom(\DOMDocument $doc, string $tagName): \DOMDocument {
$collection = new \DOMDocument;
$tags = $doc->getElementsByTagName($tagName);
$count = $tags->count();
for ($i = 0; $i < $count; $i++) {
$tag = $tags->item($i);
foreach ($tag->childNodes as $element) {
if ($element instanceof \DOMText) {
continue; // do not import DOMText
if (($newElement = $collection->importNode($element, true)) === false) {
throw new \Exception('Unable to import element.');
return $collection;
// extract HTML sections from the file
// Note: this is very slow, need to cache the result
$file = __DIR__ . '/rentcaculator.html';
$dom = new \DOMDocument();
$head = extractChildrenFrom($dom, 'head');
$body = extractChildrenFrom($dom, 'body');
/** some css */
@media (max-width: 960px) {
.fluid-row {
display: grid;
grid-template-columns: 150px calc(100vw - 150px);
grid-template-rows: 50% 50%;
"left-sidebar top-chart"
"left-sidebar bottom-chart";
.fluid-row div {
display: block;
float: none;
width: 100%;
.fluid-row div:nth-child(1) {
grid-area: left-sidebar;
.fluid-row div:nth-child(2) {
grid-area: top-chart;
.fluid-row div:nth-child(3) {
grid-area: bottom-chart;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment