首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

PHP使用DOMDocument类生成HTML实例（包含常见标签元素）

Posted in PHP onJune 25, 2014

在这一章节里， 我们来了解下如何利用核心(core) PHP 生成 HTML 文件
 
最近我在查询 php.net 的时候，发现 DOMDocument 这个类非常的有意思， 可以用来生成 XML 或 HTML 文件， DOMDocument 为我们提供了一系列的方法来生成 XML/HTML 标签并插入到 DOM 中， 现在就让我们来看下如何生成的
 
这里先来看下， 利用它所提供的方法生成的效果, 见下图:

PHP使用DOMDocument类生成HTML实例（包含常见标签元素）

一、创建新的 DOM 文件

//实例化 DOMDocument 类，并指定版本号

$dom = new DOMDocument('1.0');

 

//将生成的标签或代码输出到页面

echo $dom->saveHTML();

二、在 DOM 文件里添加新的 HTML 元素
 
$css_text = 'p{color:#ff00ff;}';

 

//创建新的 style 标签和 CSS 内容

$style = $dom->createElement('style', $css_text);

 

//添加该 style 标签到 DOM 文件中

$dom->appendChild($style);

 

//如下是输出效果

<style>

    p{color:#ff00ff;}

</style>

这里需要说下就是 createElement 方法， 当你想创建 <style> 标签并写入 Css， 可以利用该方法的第二个参数作为 Css 内容，如上所示。 但如果你想创建 <br> 标签， 第二个参数即可省略， 如下:
//创建新的 <br> 标签

$br = $dom->createElement('br');

 

//添加该 <br> 标签到 DOM 文件中

$dom->appendChild($br);

三、为 HTML 元素添加属性
 
HTML 元素拥有各种各样的属性， 为其添加属性可以用到 createAttribute() 方法
$css_text = 'p{color:#ff00ff;}';

 

//创建新的 style 标签和 CSS 内容

$style = $dom->createElement('style', $css_text);

 

//创建新的属性 'type'

$domAttribute = $dom->createAttribute('type');

 

//为属性 'type' 添加值

$domAttribute->value = 'text/css';

 

//添加该属性到 style 标签中

$style->appendChild($domAttribute);

 

//添加该 style 标签到 DOM 文件中

$dom->appendChild($style);

 

//如下是输出效果

<style type="text/css">

    p{color:#ff00ff;}

</style>

$p_text = 'This is a paragraph.';

 

//创建新的 p 标签和内容

$p = $dom->createElement('p', $p_text);

 

//创建新的属性 'id'

$domAttribute = $dom->createAttribute('id');

 

//为属性 'id' 添加值

$domAttribute->value = 'description';

 

//添加该属性到 p 标签中

$p->appendChild($domAttribute);

 

//添加该 p 标签到 DOM 文件中

$dom->appendChild($p);

 

//如下是输出效果

<p id="description">

    某一天

</p>

四、添加 Form 元素
 
添加 textbox
$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);

 

//如下是输出效果

<input type="text" name="e-mail">

五、创建 Table
 
$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);

 

//如下是输出效果

<table id="my_table">

    <tbody>

        <tr>

            <td>Label</td>

            <td>Value</td>

        </tr>

    </tbody>

</table>

最后我们来一个完整复杂一点的例子：
 
$dom = new DOMDocument('1.0');

 

//CSS 内容 

$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 标签和 CSS 内容

$style = $dom->createElement('style', $css_text);

 

//创建新的属性 'type'

$domAttribute = $dom->createAttribute('type');

 

//为属性 'type' 添加值

$domAttribute->value = 'text/css';

 

//添加该属性到 style 标签中

$style->appendChild($domAttribute);

 

//添加该 style 标签到 DOM 文件中

$dom->appendChild($style);

 

//添加 form

$form = $dom->createElement('form');

$dom->appendChild($form);

$formAttribute = $dom->createAttribute('method');

$formAttribute->value = 'post';

$form->appendChild($formAttribute);

 

//添加 table

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

$tableAttribute = $dom->createAttribute('id');

$tableAttribute->value = 'my_table';

$table->appendChild($tableAttribute);

 

//添加新的行(row)

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

$table->appendChild($tr);

 

//添加新的列(column)

$th = $dom->createElement('th', 'Generate HTML using PHP');

$tr->appendChild($th);

$thAttribute = $dom->createAttribute('colspan');

$thAttribute->value = '2';

$th->appendChild($thAttribute);

 

//添加新的行(row)

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

$table->appendChild($tr);

 

//添加新的列(column)

$td = $dom->createElement('td', 'First Name');

$tr->appendChild($td);

 

//添加新的列(column)

$td = $dom->createElement('td');

$tr->appendChild($td);

 

//添加 input 元素到列(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);

 

//添加新的行(row)

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

$table->appendChild($tr);

 

//添加新的列(column)

$td = $dom->createElement('td', 'Email');

$tr->appendChild($td);

 

//添加新的列(column)

$td = $dom->createElement('td');

$tr->appendChild($td);

 

//添加 input 元素到列(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);

 

//添加新的行(row)

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

$table->appendChild($tr);

 

//添加新的列(column)

$td = $dom->createElement('td', 'Gender');

$tr->appendChild($td);

 

//添加新的列(column)

$td = $dom->createElement('td');

$tr->appendChild($td);

 

//添加 input 元素到列(column)中

$select = $dom->createElement('select');

$td->appendChild($select);

$tdAttribute = $dom->createAttribute('name');

$tdAttribute->value = 'gender';

$select->appendChild($tdAttribute);

 

//为 Select 下拉框添加选项

$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);

 

//添加新的行(row)

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

$table->appendChild($tr);

 

//添加新的列(column)

$td = $dom->createElement('td', 'Interest');

$tr->appendChild($td);

 

//添加新的列(column)

$td = $dom->createElement('td');

$tr->appendChild($td);

 

//添加 input 元素到列(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);

 

//添加新的行(row)

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

$table->appendChild($tr);

 

//添加新的列(column)

$td = $dom->createElement('td');

$tr->appendChild($td);

$tdAttribute = $dom->createAttribute('colspan');

$tdAttribute->value = '2';

$td->appendChild($tdAttribute);

 

//添加 input 元素到列(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);

 

//添加 table 到 form 中

$form->appendChild($table);

 

echo $dom->saveHTML();

PHP使用DOMDocument类生成HTML实例（包含常见标签元素）

- Author -

junjie

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
PHP中return 和 exit 、break和contiue 区别与用法
Apr 09 PHP
sql注入与转义的php函数代码
Jun 17 PHP
ThinkPHP利用PHPMailer实现邮件发送实现代码
Sep 26 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
Sep 28 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
Apr 20 PHP
Zend Framework实现将session存储在memcache中的方法
Mar 22 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
Oct 14 PHP
PHP/HTML混写的四种方式总结
Feb 27 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
Nov 06 PHP
PHP实现链式操作的三种方法详解
Nov 16 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
Dec 21 PHP
Laravel 实现密码重置功能
Feb 23 PHP
PHP内置过滤器FILTER使用实例
Jun 25 #PHP
PHP生成图片验证码、点击切换实例
Jun 25 #PHP
PHP生成随机密码类分享
Jun 25 #PHP
PHP网页游戏学习之Xnova(ogame)源码解读（十二）
Jun 25 #PHP
PHP网页游戏学习之Xnova(ogame)源码解读（十一）
Jun 25 #PHP
JavaScript创建命名空间的5种写法
Jun 24 #PHP
PHP获取windows登录用户名的方法
Jun 24 #PHP
公共键(1) 有序排列(1) 历史记录(1) shell脚本(1) 遍历文件夹(1) 数据加密(1) pycryto(1) python-pcl(1) Anaconda(2) key(1)
You might like
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
js数组去重的常用方法总结
2014/01/24 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
python分割和拼接字符串
2013/11/01 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
python基于phantomjs实现导入图片
2016/05/13 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
python3判断url链接是否为404的方法
2018/08/10 Python
python日志logging模块使用方法分析
2019/05/23 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
Russell Stover巧克力官方网站：美国领先的精美巧克力制造商
2016/11/27 全球购物
英国定做窗帘和纺织品面料一站式商店：Dekoria
2018/08/29 全球购物
英国最大的宠物商店：Pets at Home
2019/04/17 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
工业自动化专业自荐信范文
2014/04/10 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
实习护士自荐信
2015/03/25 职场文书
消防验收申请报告
2015/05/15 职场文书
党性教育心得体会（共6篇）
2016/01/21 职场文书
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
python Tkinter模块使用方法详解
2022/04/07 Python
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL