首页
所有分类
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将网址字符串转换成超链接(网址或email)
May 25 PHP
基于php socket(fsockopen)的应用实例分析
Jun 02 PHP
PHP中file_exists函数不支持中文名的解决方法
Jul 26 PHP
php检查字符串中是否有外链的方法
Jul 29 PHP
PHP+Ajax 检测网络是否正常实例详解
Dec 16 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
May 08 PHP
PHP获取数组中指定的一列实例
Dec 27 PHP
PHP实现的二分查找算法实例分析
Dec 19 PHP
PHP微信开发之微信录音临时转永久存储
Jan 26 PHP
PHP swoole和redis异步任务实现方法分析
Aug 12 PHP
swoole锁的机制代码实例讲解
Mar 04 PHP
php 原生分页
Apr 01 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
二维码(2) Word(2) 条码(1) openGauss(1) 太阳码(1) 日志(1) Get(1) 目录管理(1) 延时任务(1) Post(1)
You might like
《魔兽争霸3：重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
js实现点击烟花特效
2020/10/14 Javascript
python中logging库的使用总结
2017/10/18 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
python爬取哈尔滨天气信息
2018/07/14 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
汉森冲浪板：Hansen Surfboards
2018/05/19 全球购物
可打印的优惠券、杂货和优惠券代码：Coupons.com
2018/06/12 全球购物
法学毕业生自我鉴定
2014/01/31 职场文书
陈欧的广告词
2014/03/18 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
职工食堂管理制度
2015/08/06 职场文书
欢送领导祝酒词
2015/08/12 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
Golang 结构体数据集合
2022/04/22 Golang