zCool工具箱新增工具——createElement方法。
用法:根据(HTML)字符串参数创建一个元素。
示例:
createElement('div');//这个当然是调用内置方法了
createElement('<tbody><tr><td></td></tr><tr></tbody>');
createElement('<img src="***" name="***" />');
createElement('<br>');
你可以回想一下,特别是用insertRow/insertCell这些传统方法为表格创建添加元素有多痛苦
源码实现:
/**
* @author zbm2001 宝儿
*/
createElement = function(sHtml){
// 创建一个可复用的包装元素
var recycled = document.createElement('div'),
// 创建标签简易匹配
reg = /^<([a-zA-Z]+)(?=\s|\/>|>)[\s\S]*>$/,
// 某些元素HTML标签必须插入特定的父标签内,才能产生合法元素
// 另规避:ie7-某些元素innerHTML只读
// 创建这些需要包装的父标签hash
hash = {
'colgroup': 'table',
'col': 'colgroup',
'thead': 'table',
'tfoot': 'table',
'tbody': 'table',
'tr': 'tbody',
'th': 'tr',
'td': 'tr',
'optgroup': 'select',
'option': 'optgroup',
'legend': 'fieldset'
};
// 闭包重载方法(预定义变量避免重复创建,调用执行更快,成员私有化)
createElement = function(sHtml){
// 若不包含标签,调用内置方法创建并返回元素
if (!reg.test(sHtml)) {
return document.createElement(sHtml);
}
// hash中是否包含匹配的标签名
var tagName = hash[RegExp.$1.toLowerCase()];
// 若无,向包装元素innerHTML,创建/截取并返回元素
if (!tagName) {
recycled.innerHTML = sHtml;
return recycled.removeChild(recycled.firstChild);
}
// 若匹配hash标签,迭代包装父标签,并保存迭代层次
var deep = 0, element = recycled;
do {
sHtml = '<' + tagName + '>' + sHtml + '</' + tagName + '>';
deep++;
}
while (tagName = hash[tagName]);
element.innerHTML = sHtml;
// 根据迭代层次截取被包装的子元素
do {
element = element.removeChild(element.firstChild);
}
while (--deep > -1);
// 最终返回需要创建的元素
return element;
}
// 执行方法并返回结果
return createElement(sHtml);
}
分享到:
相关推荐
前言: 在javascript里面动态创建... 那么今天的目的就是教大家怎么去实现一个这样的方法用来把字符串直接转换为标准的dom对象 start: 其实实现这样的一个转换是很简单的,这里主要是利用了一个属性innerHTML. innerHT
1、字符串———->jQuery对象 $(HTML字符串): $(‘我是祖国的一朵小花’) 待添加列表 2、jQuery对象———->DOM对象 下标选取法(原理:jQuery是DOM的数组形式):$(“h2”)[1] 使用.get(index)函数 3、字符串———–>...
//定义方法创建一个label标签 //*************************************// 代码如下: var createLabel = function(id, name, value) { var label_var = document.createElement(“label”); var label_id = document...
在js中直接添加html语句,js会将html字符串解析成相应的HTML语句,并在前端进行显示。 代码如下: <span xss=removed>var el = document.createElement( ‘div’ ); el[removed] = “<html><head><...
03_createElement写法.html
javascript中createElement的两种创建方式.docx
但是我对它进行了测试,发现有很多错误,或者是函数过期,或者是替换字符串写错,还有对javascript的转换函数中缺少对”\”的转换.于是对其进行了修正,然后测试就成功了!比如我上面的例子,若使用该组件的话只需要: ...
本文用示例为大家介绍下动态创建一个元素createElement及删除一个元素,感兴趣的朋友可以参考下
前面说过为HTML元素添加自定义的属性,是通过手动在HTML控件中加上,其实可以在javascript中动态添加。 关于实例说明,见:http://blog.csdn.net/redleaf1995/archive/2008/01/29/2072023.aspx
document.createElement(‘tagName’) 创建有tagName 指定的HTML元素,因为这些元素原先不存在,是根据我们的需求动态生成的,所以,我们也称为动态创建元素节点。 添加节点 在子节点后追加元素:node.appendChild...
基本创建元素 HTML元素字符串创建安装用安装npm i create-element-basic --save用法var createElement = require ( 'create-element-basic' ) ;createElement ( htmlTag [ string ] , attributes [ object ] , ...
根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。 你可以传递一个手写的 HTML 字符串,或者由某些模板引擎或插件创建的字符串,也可以是通过 AJAX 加载过来的字符串。但是在你创建 input ...
利用createElement动态创建链接,div等代码
代码如下: //createElement()创建input元素到obj对象中 var obj = document.createElement(‘input’); //选择要生成地点的前一个元素 var before = document.getElementById(‘before’); //设置obj元素名,...
使用document.createElement(‘div’)方法创建元素。 2.使用JQuery创建: 使用$(‘通过JQuery创建的新元素’)的方法直接创建元素。 如果需要将id是‘div2js’的div元素删除。 1.使用DOM对象 首先需要找到被删元素...
本文实例讲述了javascript中createElement的两种创建方式。分享给大家供大家参考。具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
只需调用document.createElement(tagName) ,其中tagName是任何有效HTML标记(例如'p' , 'div' , 'span'等)的字符串表示形式。 在浏览器中打开本课的index.html文件,或使用httpserver暂时提供该文件。 打开后,...
一般动态创建元素可以通过两种方式 1、Dom HTml 代码如下: var select = document.createElement(“select”); select.options[0] = new Option(“加载项1”, “value1”); select.options[1] = new Option(“加载项...
可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用元素的appendChild方法将 新创建元素添加到相应的元素下 举例如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head&...
在jQuery 中$(“”),这个语法等同于$(document.createElement(“span”)) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性是以某些值结尾的元素。下面举个例子来说明一下: ...