How to Generate HTML elements using PHP

Recently I faced a situation in which I needed to generate HTML documents using core PHP. When I searched php.net I came out with very interesting PHP utility to generate XML/HTML documents and tags. This utility is DOMDocument class. DOMDocument provide us a number of functions to create new XML/HTML tags and insert those tags into the DOM. See the live demo.

Live demo Download Script

Creating new DOM document

<?php
$dom = new DOMDocument('1.0');//Create new document with specified version number
echo $dom->saveHTML(); //Outputs the generated source code
?>

Adding a new HTML element in DOM document

<?php
$css_text = 'p{color:#ff00ff;}';
$style = $dom->createElement('style', $css_text);//Create new <style> tag with the css tags
$dom->appendChild($style);//Add the style tag to document
//The above code will output:
<style>
p{color:#ff00ff;}
</style>
?>

If we want to create a closing element like <style> then the createElement function will take second parameter as the contained text or value. As in the above example the <style> element is provided the CSS text to be contained. If we want to generate the open tag like <br>, we need to skip the secong parameter in the createElement function.

Adding a empty HTML element in DOM document

<?php
$br = $dom->createElement('br');//Create new <br> tag
$dom->appendChild($br);//Add the <br> tag to document
?>

Adding a attributes to HTML elements

The html elements take various attributes. Adding attributes to the elements is very simple and is done using createAttribute function.

<?php
$css_text = 'p{color:#ff00ff;}';
$style = $dom->createElement('style', $css_text);//Create new <style> tag with the css tags
$domAttribute = $dom->createAttribute('type');//Create the new attribute 'type'
$domAttribute->value = 'text/css';//Add value to attribute
$style->appendChild($domAttribute);//Add the attribute to the style tag
$dom->appendChild($style);//Add the style tag to document
//The above code will output:
<style type="text/css">
p{color:#ff00ff;}
</style>
?>
<?php
$p_text = 'This is a paragraph.';
$p = $dom->createElement('p', $p_text);//Create new <p> tag with text
$domAttribute = $dom->createAttribute('id');//Create the new attribute 'id'
$domAttribute->value = 'description';//Add value to attribute
$p->appendChild($domAttribute);//Add the attribute to the p tag
$dom->appendChild($p);//Add the p tag to document
//The above code will output:
<p id="description">
This is a paragraph.
</p>
?>

Adding Form elements

Adding textbox:

<?php
$input = $dom->createElement('input');
$domAttribute = $dom->createAttribute('type');
$domAttribute->value = 'text';
$input->appendChild($domAttribute);
$domAttribute = $dom->createAttribute('name');
$domAttribute->value = 'e-mail';
$input->appendChild($domAttribute);
$dom->appendChild($input);
//The above code will output:
<input type="text" name="e-mail">
?>

Creating Table

<?php
$table = $dom->createElement('table');
$domAttribute = $dom->createAttribute('id');
$domAttribute->value = 'my_table';

$tr = $dom->createElement('tr');
$table->appendChild($tr);

$td = $dom->createElement('td', 'Label');
$tr->appendChild($td);

$td = $dom->createElement('td', 'Value');
$tr->appendChild($td);

$table->appendChild($domAttribute);
$dom->appendChild($table);

//The above code will output:
<table id="my_table">
<tbody>
<tr>
<td>Label</td>
<td>Value</td>
</tr>
</tbody>
</table>
?>

A Complex Example

<?php
$dom = new DOMDocument('1.0');//Create new document

//Create the CSS styles
$css_text = '';
$css_text .= 'body{width:285px;margin:auto;margin-top:50px;}';
$css_text .= '#my_table{border:1px solid #ececec;}';
$css_text .= '#my_table th{border:1px solid #ececec;padding:5px;text-decoration:underline;}';
$css_text .= '#my_table td{border:1px solid #ececec;padding:5px;}';
$css_text .= '#my_table td:first-child{text-align:right;color:#333333;font-weight:bold;color:#999999;}';

$style = $dom->createElement('style', $css_text);//Create new <style> tag with the css tags

$domAttribute = $dom->createAttribute('type');//Create the new attribute

$domAttribute->value = 'text/css';//Add value to attribute

$style->appendChild($domAttribute);//Add the attribute to the style tag

$dom->appendChild($style);//Add the style tag to document

//Add the form
$form = $dom->createElement('form');
$dom->appendChild($form);
$formAttribute = $dom->createAttribute('method');
$formAttribute->value = 'post';
$form->appendChild($formAttribute);

//Add the table
$table = $dom->createElement('table');
$tableAttribute = $dom->createAttribute('id');
$tableAttribute->value = 'my_table';
$table->appendChild($tableAttribute);

//Add new row
$tr = $dom->createElement('tr');
$table->appendChild($tr);

//Add new column
$th = $dom->createElement('th', 'Generate HTML using PHP');
$tr->appendChild($th);
$thAttribute = $dom->createAttribute('colspan');
$thAttribute->value = '2';
$th->appendChild($thAttribute);


//Add new row
$tr = $dom->createElement('tr');
$table->appendChild($tr);

//Add new column
$td = $dom->createElement('td', 'First Name');
$tr->appendChild($td);

//Add new column
$td = $dom->createElement('td');
$tr->appendChild($td);

//Add input element to column
$input = $dom->createElement('input');
$td->appendChild($input);
$tdAttribute = $dom->createAttribute('type');
$tdAttribute->value = 'text';
$input->appendChild($tdAttribute);
$tdAttribute = $dom->createAttribute('name');
$tdAttribute->value = 'f_name';
$input->appendChild($tdAttribute);

//Add new row
$tr = $dom->createElement('tr');
$table->appendChild($tr);

//Add new column
$td = $dom->createElement('td', 'Email');
$tr->appendChild($td);

//Add new column
$td = $dom->createElement('td');
$tr->appendChild($td);

//Add input element to column
$input = $dom->createElement('input');
$td->appendChild($input);
$tdAttribute = $dom->createAttribute('type');
$tdAttribute->value = 'text';
$input->appendChild($tdAttribute);
$tdAttribute = $dom->createAttribute('name');
$tdAttribute->value = 'e-mail';
$input->appendChild($tdAttribute);

//Add new row
$tr = $dom->createElement('tr');
$table->appendChild($tr);

//Add new column
$td = $dom->createElement('td', 'Gender');
$tr->appendChild($td);

//Add new column
$td = $dom->createElement('td');
$tr->appendChild($td);

//Add input element to column
$select = $dom->createElement('select');
$td->appendChild($select);
$tdAttribute = $dom->createAttribute('name');
$tdAttribute->value = 'gender';
$select->appendChild($tdAttribute);
//Add options to select box
$opt = $dom->createElement('option', 'Male');
$domAttribute = $dom->createAttribute('value');
$domAttribute->value = 'male';
$opt->appendChild($domAttribute);
$select->appendChild($opt);

$opt = $dom->createElement('option', 'Female');
$domAttribute = $dom->createAttribute('value');
$domAttribute->value = 'female';
$opt->appendChild($domAttribute);
$select->appendChild($opt);


//Add new row
$tr = $dom->createElement('tr');
$table->appendChild($tr);

//Add new column
$td = $dom->createElement('td', 'Interest');
$tr->appendChild($td);

//Add new column
$td = $dom->createElement('td');
$tr->appendChild($td);

//Add input element to column
$radio = $dom->createElement('input');
$td->appendChild($radio);
$radAttribute = $dom->createAttribute('type');
$radAttribute->value = 'radio';
$radio->appendChild($radAttribute);
$radAttribute = $dom->createAttribute('name');
$radAttribute->value = 'interest';
$radio->appendChild($radAttribute);
$radAttribute = $dom->createAttribute('id');
$radAttribute->value = 'php';
$radio->appendChild($radAttribute);

$label = $dom->createElement('label', 'PHP');
$labelAttribute = $dom->createAttribute('for');
$labelAttribute->value = 'php';
$label->appendChild($labelAttribute);
$td->appendChild($label);

$radio = $dom->createElement('input');
$td->appendChild($radio);
$radAttribute = $dom->createAttribute('type');
$radAttribute->value = 'radio';
$radio->appendChild($radAttribute);
$radAttribute = $dom->createAttribute('name');
$radAttribute->value = 'interest';
$radio->appendChild($radAttribute);
$radAttribute = $dom->createAttribute('id');
$radAttribute->value = 'jquery';
$radio->appendChild($radAttribute);

$label = $dom->createElement('label', 'jQuery');
$labelAttribute = $dom->createAttribute('for');
$labelAttribute->value = 'jquery';
$label->appendChild($labelAttribute);
$td->appendChild($label);

//Add new row
$tr = $dom->createElement('tr');
$table->appendChild($tr);

//Add new column
$td = $dom->createElement('td');
$tr->appendChild($td);
$tdAttribute = $dom->createAttribute('colspan');
$tdAttribute->value = '2';
$td->appendChild($tdAttribute);

//Add input element to column
$input = $dom->createElement('input');
$td->appendChild($input);
$tdAttribute = $dom->createAttribute('type');
$tdAttribute->value = 'submit';
$input->appendChild($tdAttribute);
$tdAttribute = $dom->createAttribute('value');
$tdAttribute->value = 'Sign-Up';
$input->appendChild($tdAttribute);


//Add table to form
$form->appendChild($table);

echo $dom->saveHTML();
?>

Written by Arvind Bhardwaj

Arvind is a Magento and WordPress expert with more than 6 years of industry wide experience.

Website: http://www.webspeaks.in/

13 thoughts on “How to Generate HTML elements using PHP

  1. Please tell me what is the point of this? Everyone who has done a little bit work with php, xml and dom knows this stuff already, i don’t get it.

    1. Maybe (and this might be a crazy idea for you) there is someone out there who hasn’t done this yet. Maybe this will help them get into it and understand how it all works.

      Maybe, just maybe, the entire internet isn’t made especially for you.

    2. The answer is in the question: Everyone who "HAS DONE … WORK WITH PHP" knows this stuff. That means some people only know this. As for me, this was a great help, it helps me to go straight to the code without reading the entire php DOM tuto . And trust me, I know some javascipt, yet untill I see this, I didn't know how to do the same stuff via php dom

  2. SimpleXML is a lot easier to work with than DOMDocument. And it’s easy to convert back and forth between the two if necessary.

  3. If your website does not stand out and happens to get lost somewhere amongst the
    millions of websites that are released on the World Wide
    Web every day, chances of your business acquiring success are rather slim.
    Most of the reputed companies will offer a full refund in case you don't see desired results.
    Next in cheap SEO packages, we have press releases.

  4. Fortunately, there aren't any ads in the site, making the whole interface
    look clear. Hell – Bound Hackers is the quintessential site for hacking tutorials.
    By pitting you against thousands of competitors all looking to get one over on you, this free hacking
    simulator drives the importance of caution deep into your psyche.

Comments are closed.