createElement()

The SniperJS createElement() is use to create an Element into selected DOM element

Examples:

This code will create a p element and insert into the element with the ID of mydiv

$("#mydiv").createElement('p');

Returns

  • The Created element.

Create a div element

$("body").createElement('div');

Create element with classes and id

$("body").createElement('div.myclass1');

//output:
<body>
    <div class="myclass1"></div>
</body>
$("body").createElement('div.animate.active.faster#element20');

//output:
<body>
    <div class="animate active faster" id="element20"></div>
</body>
$("body").createElement('div.#uid34');

//output:
<body>
    <div id="uid34"></div>
</body>

Prepend

this will create and insert it to the start of the selected element. By just passing true as the 2nd paramter.

$("ul").createElement('li',true);
$("html").createElement({nodeName:'head'},true);

Define attributes as you create 

$('mydiv').createElement({ 
 nodeName: 'p',
 id: 'paragraph2',
 textContent: 'I love SniperJS' ,
 className:'myP'
});


/* OUTPUT:

 <div class="mydiv">
    <p id="paragraph2" class="myP">I love SniperJS</p>
</div>

*/

Creating an Element for Multiple elements

const lists = $('nav ul li*'); //returns NodeList

lists.createElement({ 
 nodeName: 'a',
 href: 'javascript:void(0)',
 textContent: 'click me' 
}, true);

📝 It uses exactly Javascript naming scheme for DOM Elements. e.g, nodeName, textContent, className, id, ... etc

Previousappend()NextonPageLoad()

Last updated