alexiscolin / create-element

🏗️ Create complete element and insert it in the DOM

🏗️ create-element

This function creates DOM elements with styles, attributes, content and let you insert them in the DOM through multiple options.

SYNTAX

createElement([option, insert]);

USE

import createElement from 'create-element';

let el = createElement({
    type: 'a',
    link: 'image.png',
    style: 'my-first-style my-second-style',
    attributes: {'target': '_blank', 'title': 'this is awesome'},
    content: 'click here'
  },{
    target: document.getElementById('target'),
    type: 'sibling',
    method: 'after'
  });

OPTIONS AND SETTINGS

This function has two optionals parameters you can use with object type argument. The first one is set in order to define element configuration wherheas the second one is used in order to configure insertion in the DOM. Several optional properties can be set inside of them:

Option object (1st argument)

option	type	explanation	exemple
type - default: 'div'	String	Element type you want to create	'type' : 'img'
id	String	Id that you may want to set on the element.	'id' : 'myID'
style	String	You can set one or multiple classes by adding them in string separated by space.	'style': 'style1 style2'
	Object	You can also set inline style using an object listing all the style you want to apply, separated by comma.	'style': { 'height': '200px', 'z-index': '-1' }
attributes	Object	List of attributes to apply. Think about `target` or `title` for <a> element or `alt` for <img> element. Data attributes can also be set.	'attributes': { 'data-attr' : 'true', 'target': '_blank', 'title': 'titre' }
src	String	Link to the image for src attribute on media elements.	'src' : './myimage.png'
link	String	Target you want to link with href attribute on link elements (internal or external links are OK)	'link' : 'mylink.html'
content	String	String that will be added to the content of the new element.	'content' : 'my content here'
	HTMLNode	Node that will be added to the content of the new element	'content': '<span>here</span>'

Insert object (2nd argument)

option	type	value	explanation	exemple
target	HTMLNode		Target element that is the reference for adding the new element in the DOM.	'target' : targetEl
type - default: 'sibling'	String	sibling	The new element will be adding as a sibling of the targeted element.	'type' : 'sibling'
		container	The new element will be adding as a child of targeted element.	'type' : 'container'
method default: 'after'	String	before	The new element will be added before the target in case of sibling type or as a first child of the target in case of container type.	'method' : 'before'
		after	The new element will be added after the target in case of sibling type or as a last child of the target in case of container type.	'method' : 'after'