mootools 元素追加
I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax.
我真的不喜欢jQuery的元素创建语法。 它基本上与输入HTML相同,但在JavaScript字符串中……很丑! 幸运的是,Basil Goldman创建了一个jQuery插件,可让您使用类似MooTools的语法创建元素。
View Demo
观看演示
标准jQuery元素创建 (Standard jQuery Element Creation)
var newDiv = $('<div class="my-class"></div>');
Looks exactly like writing out the HTML...blah.
看起来就像写HTML ...等等。
jQuery .create方法 (The jQuery .create Method)
/* plugin */
jQuery.create = function() {
if (arguments.length == 0) return [];
var args = arguments[0] || {}, elem = null, elements = null;
var siblings = null;
// In case someone passes in a null object,
// assume that they want an empty string.
if (args == null) args = "";
if (args.constructor == String) {
if (arguments.length > 1) {
var attributes = arguments[1];
if (attributes.constructor == String) {
elem = document.createTextNode(args);
elements = [];
elements.push(elem);
siblings =
jQuery.create.apply(null, Array.prototype.slice.call(arguments, 1));
elements = elements.concat(siblings);
return elements;
} else {
elem = document.createElement(args);
// Set element attributes.
var attributes = arguments[1];
for (var attr in attributes)
jQuery(elem).attr(attr, attributes[attr]);
// Add children of this element.
var children = arguments[2];
children = jQuery.create.apply(null, children);
jQuery(elem).append(children);
// If there are more siblings, render those too.
if (arguments.length > 3) {
siblings =
jQuery.create.apply(null, Array.prototype.slice.call(arguments, 3));
return [elem].concat(siblings);
}
return elem;
}
} else return document.createTextNode(args);
} else {
elements = [];
elements.push(args);
siblings =
jQuery.create.apply(null, (Array.prototype.slice.call(arguments, 1)));
elements = elements.concat(siblings);
return elements;
}
};
This class was taken from Basil Goldman's blog post. The code isn't beautiful but its functionality is.
该课程摘自Basil Goldman的博客文章 。 代码虽然不漂亮,但是功能却很不错。
用法 (The Usage)
/* usage */
$(document).ready(function() {
var element = $.create('li',{
id: 'item',
'class': 'custom-class'
},['This is a new LI element']);
$(document.body).append(element);
});
View Demo
观看演示
You provide three arguments: the element type, element attributes, and an array containing the text within the element or child elements. OK, so it's not quite as wonderful as MooTools' element creation but it's a step in the right direction!
您提供了三个参数:元素类型,元素属性以及包含元素或子元素内的文本的数组。 好,所以它不如MooTools的元素创建那么美妙,但这是朝着正确方向迈出的一步!
翻译自: https://davidwalsh.name/jquery-create-element
mootools 元素追加
相关资源:jdk-8u281-windows-x64.exe