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
投稿猜你喜欢
冒泡的表现近期用vue做了一个需求，大概是同一个区域，点击不同位置有不同的响应函数，还有个总的响应函数，好吧，如下图所示:他们的DOM结构如- 以mysql-noinstall-5.0.22-win32为例，解压缩后会看到mysql-5.0.22-win32文件夹下面，有五个ini格
- c#连接sqlserver、插入数据、从数据库获取时间using System;using System.Data.SqlClient;na
- MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当 * 能最丰富，最像关系数据库的。他支持的数据结构非常松散，是类似
- 本文实例讲述了使用Flask-Cache缓存实现给Flask提速的方法。分享给大家供大家参考，具体如下：Django里面可以很方便的应用缓存
- /* --注意：准备数据（可略过，非常耗时） CREATE TABLE CHECK1_T1 ( ID INT, C1 CHAR(8000)
- cv2.getStructuringElement()函数的作用是返回一个结构元素（卷积核），具体解析如下：kernel = cv2.get
- 我们平日办公时用得最多的软件是Execl、Word或WPS Office等，你的计算机中一定储存着大量的XLS、DOC、WPS文件吧！网页制
- 1.VUE验证邮箱export const isEmail = (s) => { return /^([a-
- 如下所示：from osgeo import gdalimport numpy as npdef read_tiff(inpath): &n
- 本文实例讲述了利用PHP函数计算中英文字符串长度的方法。分享给大家供大家参考。具体实现方法如下：一般来说大家知道英文字符占一个字节,而中文字
- 可视化大屏适配/自适应现状可视化大屏的适配是一个老生常谈的话题了，现在其实不乏一些大佬开源的自适应插件、工具但是我为什么还要重复造轮子呢？因
- 301跳转通常用在网站换域名和为了保持链接统一性所用的。比如你原来的域名www.a.com现在换成www.b.com,用了301跳转后，访问
- 一、介绍在做YOLOv3项目时，会需要将文本文件中的某部分内容进行批量替换和修改，所以编写了python程序批量替换所有文本文件 * 定部分的
- 这里，我们将采用Tensor Flow内建函数实现简单的CNN，并用MNIST数据集进行测试第1步：加载相应的库并创建计算图会话import
- my.ini在参考https://www.jb51.net/article/100284.htm之后执行mysqld --initializ
- 原文地址：30 Days of Mootools 1.2 Tutorials - Day 5 - Event HandlingMooTool
- 一、读者指引读者指引帮助你掌握本文的梗概。以免你看了大半才明白这编文章不适合你，给你造成视觉污染。如果你正在用ASP+XML写一些程序，或者
- 一、使用loadVariables 一个例子简单的描述了如何通过GET方法向服务器端的ASP发送请求: _root. pushAc
- kafka的认证方式一般有如下3种：1.SASL/GSSAPI 从版本0.9.0.0开始支持2.SASL/PLAIN 从版本0.10.0.0
