jcat-create-element v1.0.1
jCat.createElement
Description
Creates an element according to the parameter «selector», or HTMLUnknownElement
if the element is unknown.
Installation
1. You can install the jcat-create-element
and import it as a module
$ npm install jcat-create-element
import {createElement} from "jcat-create-element";
2. Or import directly to your site
<script src="/path_to_libs/jCat.createElement.js"></script>
<script src="/path_to_libs/jCat.createElement.min.js"></script>
Syntax
jCat.createElement([selector[, content[, styles]]]);
jCat.createElement([selector[, properties[, styles]]]);
Parameters
selector
The selector pattern for creating of a new element. The parameter type must be string
. If the parameter is null
, undefined
, ""
or is not specified, then the default value is "div"
.
You can specify these values below in the selector pattern:
- tagName — an element type (
div
,span
,img
, etc.). If there is tagName in the selector pattern, then you must use it in the begining of the code. If there is no tagName in the selector pattern, then the default value is «div». - className — each class name must be specified with «.» (for example:
.hello
,.foo.bar
). - id — an ID must start with the symbol «#» and must be the only one (for example:
#test
,#hello
). If there is more than one ID, then only the last one will be used; the other ones will be ignored.
«id» and «className» can be combined in any order.
content
The parameter type string
, that will contain every data for the new element. The parameter works similar to the property Element.prototype.innerHTML
, and it means that the value can be a HTML layout.
properties
The parameter type object
that contains every data for the new element. It is allowed to specify only the properties that exist in the element prototype as setter
; any other properties will be ignored.
Additional properties:
properties.classList
— an additional list of class names. The additional class names will be added to the element's already existing class names. The value type should bearray
, orstring
- in that case, the class names are separated with a SPACE key.
styles
The parameter type object
or string
. If it is an object
, then it must contain a bunch of styles in the format {propertyName: propertyValue, ...}
. If it is a string
, then it must have the format cssText
: "property-name: property-value; ..."
.
Return value
Returns the element according to the parameter «selector», or HTMLUnknownElement
if the element is unknown.
Examples
Creating an element
1. How to create an element
var element = jCat.createElement("div");
document.body.appendChild(element);
//<div></div>
var element = jCat.createElement("span");
document.body.appendChild(element);
//<span></span>
var element = jCat.createElement("p");
document.body.appendChild(element);
//<p></p>
2. How to create a default element
var element = jCat.createElement();
document.body.appendChild(element);
console.log(element.tagName); // "DIV"
var element = jCat.createElement(null); //parameter `selector` = null, undefined or ""
document.body.appendChild(element);
console.log(element.tagName); // "DIV"
3. How to create an element using selector
var element = jCat.createElement("span.text");
document.body.appendChild(element);
//<span class="text"></span>
var element = jCat.createElement("span.text.center");
document.body.appendChild(element);
//<span class="text center"></span>
var element = jCat.createElement(".foo.bar");
document.body.appendChild(element);
//<div class="foo bar"></div>
var element = jCat.createElement("#text");
document.body.appendChild(element);
//<div id="test"></div>
var element = jCat.createElement("p.foo.bar#text");
document.body.appendChild(element);
//<p class="foo bar" id="text"></p>
var element = jCat.createElement("p.foo#text.bar"); //.className and #id can be combined in any order
document.body.appendChild(element);
//<p class="foo bar" id="text"></p>
4. How to create an element that contains data
var element = jCat.createElement("span", "Hello world!");
document.body.appendChild(element);
//<span>Hello world!</span>
var element = jCat.createElement("span", "<b>Hello world!</b>");
document.body.appendChild(element);
//<span><b>Hello world!</b></span>
var element = jCat.createElement(".foo.bar", {
innerHTML: "<p>This is paragraph</p>"
});
document.body.appendChild(element);
//<div class="foo bar"><p>This is paragraph</p></div>
var element = jCat.createElement("#test", {
textContent: "This is text"
});
document.body.appendChild(element);
//<div id="text">This is text</div>
5. How to create an element using properties
var element = jCat.createElement("a", {
href: "#",
target: "_blank",
textContent: "This is anchor"
});
document.body.appendChild(element);
//<a href="#" target="_blank">This is anchor</a>
var element = jCat.createElement("img.logo", {
alt: "",
src: "../logo.png"
});
document.body.appendChild(element);
//<img alt="" src="../logo.png">
var element = jCat.createElement("input.field#login", {
maxLength: 32,
name: "login",
placeholder: "Your login"
});
document.body.appendChild(element);
//<input class="field" id="login" maxlength="32" name="login" placeholder="Your login">
var element = jCat.createElement("button.my-button", {
innerHTML: "<b>CLICK ME</b>",
onclick: function() {
alert("Hello world!");
}
});
document.body.appendChild(element);
//<button class="my-button"><b>CLICK ME</b></button>
6. How to create an element using styles
var element = jCat.createElement("span", "This is text", "color: red; font-size: 2em");
document.body.appendChild(element);
//<span style="color: red; font-size: 2em;">This is text</span>
var element = jCat.createElement("", "Hello world!", {
backgroundColor: "#000000",
color: "#FFFFFF",
fontSize: "16px"
});
document.body.appendChild(element);
//<div style="background-color: #000000; color: #FFFFFF; font-size: 16px;">Hello world!</div>
var element = jCat.createElement("section.comments", null, {
display: "flex",
justifyContent: "space-between"
});
document.body.appendChild(element);
//<section class="comments" style="display: flex; justify-content: space-between;"></section>
var element = jCat.createElement("img#pixel", {
alt: "",
src: "../../pixel.php"
}, {
height: 0,
position: "absolute",
visibility: "hidden",
width: 0
});
document.body.appendChild(element);
//<img alt="" src="../../pixel.php" style="height: 0; position: absolute; visibility: hidden; width: 0;">
Features
1. Using properties.classList
var element = jCat.createElement("span", {
classList: "text"
});
document.body.appendChild(element);
//<span class="text"></span>
var element = jCat.createElement("span.text", {
classList: "foo bar"
});
document.body.appendChild(element);
//<span class="text foo bar"></span>
var element = jCat.createElement("span.text", {
classList: ["foo", "bar"]
});
document.body.appendChild(element);
//<span class="text foo bar"></span>
2. Overriding properties
var element = jCat.createElement("span#text-1#text-2");
document.body.appendChild(element);
//<span id="text-2"></span>
var element = jCat.createElement("span#text-1.foo.bar#text-2");
document.body.appendChild(element);
//<span id="text-2"></span>
var element = jCat.createElement("span.foo.bar", {
className: "text"
});
document.body.appendChild(element);
//<span class="text"></span>
var element = jCat.createElement("span.text", {
classList: ["foo", "bar"],
className: ""
});
document.body.appendChild(element);
//<span class=""></span>
var element = jCat.createElement("span#text-1", {
id: "text-2"
});
document.body.appendChild(element);
//<span id="text-2"></span>
var element = jCat.createElement("span#text-1#text-2", {
id: "text-3"
});
document.body.appendChild(element);
//<span id="text-3"></span>
3. Ignoring properties
If there is no property in the element prototype or it is not «setter», then it will be ignored.
var element = jCat.createElement("span#text", {
//Not ignored. This «setter» exists in the element prototype
onclick: function() {
alert("Hello World!");
},
//Ignored. This property does not exist in the element prototype
customProperty: "Hello world!",
//Not ignored. This «setter» exists in the element prototype
hidden: true,
//Ignored, because the «insertBefore» is the method from the element prototype.
//Do not override any methods from the element prototype!
insertBefore: null,
//Properties are ignored, because «parentNode» and «tagName» are only «getter».
parentNode: document.body,
tagName: "div"
});
License
Languages
English Русский