mootools 元素追加_类似于MooTools的jQuery中的元素创建

不念不忘少年蓝@ 2023-02-21 16:21 308阅读 0赞

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][] [观看演示][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][Basil Goldman_s blog post]. The code isn't beautiful but its functionality is.

该课程摘自[Basil Goldman的博客文章][Basil Goldman_s blog post] 。 代码虽然不漂亮，但是功能却很不错。

## 用法 **(**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][] [观看演示][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][https_davidwalsh.name_jquery-create-element]

mootools 元素追加

[View Demo]: https://davidwalsh.name/demo/jquery-create.php
[Basil Goldman_s blog post]: http://blogs.microsoft.co.il/blogs/basil/archive/2008/08/21/jquery-create-jquery-plug-in-to-create-elements.aspx
[https_davidwalsh.name_jquery-create-element]: https://davidwalsh.name/jquery-create-element