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 相关文章推荐
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
Mar 06 PHP
PHP遍历二维数组的代码
Apr 22 PHP
php preg_replace替换实例讲解
Nov 04 PHP
对PHP新手的一些建议(PHP学习经验总结)
Aug 20 PHP
php使用数组填充下拉列表框的方法
Mar 31 PHP
PHP.ini安全配置检测工具pcc简单介绍
Jul 02 PHP
php中Redis的应用--消息传递
Mar 28 PHP
PHP给源代码加密的几种方法汇总(推荐)
Feb 06 PHP
浅析PHP数据导出知识点
Feb 17 PHP
PHP实现打包zip并下载功能
Jun 12 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
Feb 15 PHP
PHP Swoole异步MySQL客户端实现方法示例
Oct 24 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
You might like
简单的cookie计数器实现源码
2013/06/07 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
基于python编写的微博应用
2014/10/17 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
使用Python的Flask框架构建大型Web应用程序的结构示例
2016/06/04 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python实现简单学生信息管理系统
2020/04/09 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
经营管理策划方案
2014/05/22 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
Windows7下FTP搭建图文教程
2022/08/05 Servers