首页
所有分类
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 Socket配置以及实例的详细介绍
Jun 13 PHP
基于PHP的简单采集数据入库程序【续篇】
Jul 30 PHP
yii操作session实例简介
Jul 31 PHP
php遍历CSV类实例
Apr 14 PHP
PHP、Java des加密解密实例
Apr 27 PHP
PHP实现根据银行卡号判断银行
Apr 29 PHP
php采集中国代理服务器网的方法
Jun 16 PHP
基于命令行执行带参数的php脚本并取得参数的方法
Jan 25 PHP
php生成Android客户端扫描可登录的二维码
May 13 PHP
Yii列表定义与使用分页方法小结(3种方法)
Jul 15 PHP
PHP基于SPL实现的迭代器模式示例
Apr 22 PHP
在Laravel中使用MongoDB的方法示例
Nov 11 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
长波(3) 烈阳天道(2) 无线电(12) 怀旧期刊(1) 中学科技(1) 保养(1) 下载(1) 短波(8) 广播(8) 收音机(62)
You might like
用PHP调用Oracle存储过程
2006/10/09 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
php实现websocket实时消息推送
2018/03/30 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
Node.js简单入门前传
2017/08/21 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
Python常用特殊方法实例总结
2019/03/22 Python
Python字符串的一些操作方法总结
2019/06/10 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
深入了解Python 变量作用域
2020/07/24 Python
Python函数调用追踪实现代码
2020/11/27 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
AmazeUI折叠式卡片布局，整合内容列表、表格组件实现
2020/08/20 HTML / CSS
波兰快递服务：Globkurier.pl
2019/11/08 全球购物
Nayomi官网：沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
P/Invoke是什么
2015/07/31 面试题
小学生一年级（书信作文）
2019/08/13 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL