Skip to content

Latest commit

 

History

History
145 lines (133 loc) · 4.71 KB

README.md

File metadata and controls

145 lines (133 loc) · 4.71 KB
Raw

🏗️ 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'