Mootools 1.2教程(6)——操纵HTML DOM元素（3）
作者：Fdream 来源：Fdream博客 发布时间：2008-11-20 13:19:00
标签：mootools,dom,javascript,ajax,教程
创建一个新元素
new Element
你可以使用“new Element”构造器来创建一个行的HTML元素。这和写一个正常的HTML元素非常类似，只不过你需要调整一下语法，以便能够在MooTools下正常运行：
参考代码：
// 首先命名一个变量并声明一个“new Element”
// 然后定义元素的类型（div、a、span...）
var newElementVar = new Element('div', {
// 在这里设置元素的所有属性
'id': 'id_name',
'text': 'I am a new div',
'styles': {
// 在这里设置元素的所有样式参数
'width': '200px',
'height': '200px',
'background-color': '#eee',
'float': 'left'
}
});
现在你就有一个元素了，你可以通过我们刚才学的inject();方法把这个元素放在页面上的某个位置。我们从下面这个简单的HTML开始：
参考代码：
<div id="body_wrap">
<div id="content_id">Some div content</div>
</div>
现在，我们把ID为content_id的元素转换为一个变量：
参考代码：
var bodyWrapVar = $('body_wrap');
和我们刚才学的一样，我们可以把我们创建的这个元素注入到当前的HTML中：
参考代码：
// 这句的意思是说：“把newElementVar注入到bodyWrapVar内部，并放置到顶部”
newElementVar.inject(bodyWrapVar , 'top');
这个代码最终可能是这样的：
参考代码：
<div id="body_wrap">
<!-- 这个元素被注入到内部顶部 -->
<div id="id_name">I am a new div</div>
<div id="content_id">Some div content</div>
</div>
0
投稿猜你喜欢
- 为了防止再次被攻击，做个验证码过滤程序是必要的。我在网上找了一些资料，觉得用别人做好的代码总是很不爽，自己做麻又不会写复杂的代码，特别是生成
- 下面为大家举一个例子，请按照下面的步骤： （1）从http：//home.gbsource.net/xuankong/dll.z
- 提要：系统自带的mysql默认字符集不是gbk,因此给数据库的推广应用以及中文程序的开发带来极大的不便,在没完没了的GBK和UTF8的转换过
我认为多选列表具有完美的功能——只需按下Ctrl键，同时点击鼠标从列表中选择多个项目。以下是一个典型的多选列表框：选出你最喜爱的快餐：&nb- 最近决定把MT的后台数据从Berkeley的文件DB转到MySQL。原因之一是使用关系数据库可以获得更多的灵活性，比如运行一条sql来变更
- 新上的一台服务器出现了一个现象：ASP程序中，调用函数Now()，显示的时间总是形如“2009-07-12 上午 08:12:56”这样的，
- rss.asp格式的 下面代码保存为rss.asp 代码如下:<!--#include file="conn.as
- 大家都知道在Dreamwerver中可以很方便地实现记录集的分页显示，但是生成的代码的确很庞大，影响了网页的显示速度，看起来条理也不是很清晰
- 表单的验证一直是网页设计者头痛的问题，表单验证类 Validator就是为解决这个问题而写的，旨在使设计者从纷繁复杂的表单验证中解放出来，把
- 只添加了一些自己想到的常用的功能,欢迎大家补充添加自己的好的思路. 通用的正则和方法可以写在RegExpObj中,
- Liwu_Items表，CreateTime列建立聚集索引 第一种，sqlserver2005特有的分页语法 代码如下:declare @p
- Rotation滤镜可以使图片产生旋转效果，注意必须是IE5.5及IE6.0才能看到！方法如下：制作过程：一、准备图片1张。二、建立一个CS
- 代码如下:--代码一DECLARE @cc INT SELECT NewsId,ROW_NUMBER() OVER(ORDER
- 主要讲 except 和 not in 的性能上的区别。 代码如下:CREATE TABLE tb1(ID int) CREAT
- 前一段时间就安装了AspJpeg 2.0，一直没有时间去测试，直到昨天晚上因为服务器无法访问才在本机测试下，特分享下测试结果，只针对GIF图
- 第一种方法： 代码如下:Minimsdn.com为您提供的代码: -- Turn ON [Display IO Info when exec
- 在我们建立一个数据库时，并且想将分散在各处的不同类型的数据库分类汇总在这个新建的数据库中时，尤其是在进行数据检验、净化和转换时，将会面临很大
- 同时在线访问量继续增大 对于1G内存的服务器明显感觉到吃力严重时甚至每天都会死机 或者时不时的服务器卡一下 这个问题曾经困扰了我半个多月My
- 如何显示一个文本文件？完整显示文本文件的代码如下： Write（STRING） WriteLine（STRING） WriteBlan
- MySQL GUI工具很多，本文就常用的Navicat for MySQL与MySQL-Front的特色功能做一个详细介绍与比较。(一)My
