before, after, prepend, append methods introduced

Author: bcinarli

.eslintrc

@@ -8,8 +8,8 @@
     "node": true
   },
   "globals": {
-    "console": true,
-    "_": true
+    "_": true,
+    "uxr": true
   },
   "extends": "eslint:recommended",
   "rules": {

README.md

@@ -7,6 +7,11 @@ A minimal in mind library for DOM related routines and element selections. UXR w
 
 UXR has the philosophy of fewer code and low file size. Because of this, widely supported ES6 codes are not transpiled to ES5 versions and not trying to cover all JavaScript methods which are normally written without much effort. UXR provides easy to wrappers for normally complex once.
 
+## Browser Support
+| Browser | [![chrome][chrome]] | [![firefox][firefox]] | [![opera][opera]] | [![safari][safari]] | [![edge][edge]] |
+| ------- | ------------------- | --------------------- | ----------------- | ------------------- | --------------- |
+| Version  | 49+  | 36+ | 37+ | 10+ | 12+ |
+
 ## How To Use
 After adding the `dist/uxr.min.js` to your page, you can select an element set from DOM and start to manipulate/modify the selection.
 
@@ -185,11 +190,40 @@ All of the following strings are valid wrapper definitions
 * `<div class="wrapper" />` _tag name with attributes_
 * `<div class='wrapper' id="container"></div>`
 
+### Element Insertions
+By using `before`, `after`, `prepend` and `append` you can control where to insert newly created elements.
+
+``` js
+let el = uxr('.container');
+
+// adds an element before selection
+el.before('<p>This will before "el"</p>');
+el.before(uxr('#new'));
+
+// adds an element after selection
+el.after('<p>This will before "el"</p>');
+el.after(uxr('#new'));
+
+// appends an element add the end of selection's content
+el.append('<p>This will before "el"</p>');
+el.append(uxr('#new'));
+
+// appends an element add the beginning of selection's content
+el.prepend('<p>This will before "el"</p>');
+el.prepend(uxr('#new'));
+```
+
 [npm]: https://img.shields.io/npm/v/uxr.svg
 [npm-url]: https://npmjs.com/package/uxr
 
 [tests]: http://img.shields.io/travis/bcinarli/uxr.svg
 [tests-url]: https://travis-ci.org/bcinarli/uxr
 
 [cover]: https://codecov.io/gh/bcinarli/uxr/branch/master/graph/badge.svg
-[cover-url]: https://codecov.io/gh/bcinarli/uxr
+[cover-url]: https://codecov.io/gh/bcinarli/uxr
+
+[chrome]: http://uxrocket.io/browsers/chrome.png
+[firefox]: http://uxrocket.io/browsers/firefox.png
+[opera]: http://uxrocket.io/browsers/opera.png
+[safari]: http://uxrocket.io/browsers/safari.png
+[edge]: http://uxrocket.io/browsers/edge.png

dist/uxr.js

@@ -3,13 +3,12 @@
  * uxr
  **/
 
-const _ = window.uxr = function (selector, context) {
-    return new uxr(selector, context);
+const _ = window.uxr = function (selector) {
+    return new uxr(selector);
 };
 
-const uxr = function (selector, context) {
+const uxr = function (selector) {
     this.selector = selector;
-    this.context = context;
     this.init();
 };
 
@@ -279,6 +278,9 @@ Element.prototype.matches = Element.prototype.matches ? Element.prototype.matche
  * manipulation
  **/
 
+/* global getInsertableElement */
+/* global insertBefore */
+
 _.extend.empty = function () {
     this.el.forEach(item => item.innerHTML = '');
 
@@ -290,6 +292,33 @@ _.extend.remove = function () {
 
     return this;
 };
+
+_.extend.append = function (stringOrObject) {
+    this.el.forEach(item => item.appendChild(getInsertableElement(stringOrObject)));
+
+    return this;
+};
+
+_.extend.prepend = function (stringOrObject) {
+    this.el.forEach(
+        item => insertBefore(stringOrObject, item, 'firstChild'));
+
+    return this;
+};
+
+_.extend.after = function (stringOrObject) {
+    this.el.forEach(
+        item => insertBefore(stringOrObject, item, 'nextSibling', true));
+
+    return this;
+};
+
+_.extend.before = function (stringOrObject) {
+    this.el.forEach(
+        item => insertBefore(stringOrObject, item, 'self', true));
+
+    return this;
+};
 /**
  * ready
  **/
@@ -349,6 +378,40 @@ const maybeMultiple = s => typeof s === 'string' ? justifyString(s).split(' ') :
 // Dom String Format
 // eslint-disable-next-line
 const toDomString = s => s.substr(0, 1).toLowerCase() + s.split('-').map(chunk => chunk.charAt(0).toUpperCase() + chunk.slice(1)).join('').substring(1);
+
+// Element from string
+// eslint-disable-next-line
+const elementFromString = s => {
+    if (typeof s === 'string') {
+        let template = document.createElement('template');
+        template.innerHTML = s.trim();
+
+        return template.content.firstChild;
+    }
+
+    return s;
+};
+
+// Insertable Element
+// eslint-disable-next-line
+const getInsertableElement = s => {
+    let insertableElement = elementFromString(s);
+
+    if (insertableElement instanceof uxr) {
+        insertableElement = insertableElement.el[0];
+    }
+
+    return insertableElement;
+};
+
+// InserBefore
+// eslint-disable-next-line
+const insertBefore = (insert, target, ref, parent) => {
+    let to = parent === true ? target.parentNode : target;
+    let where = ref === 'self' ? target : target[ref];
+
+    to.insertBefore(getInsertableElement(insert), where);
+};
 /**
  * wrap
  **/

dist/uxr.min.js

@@ -2,6 +2,9 @@
  * manipulation
  **/
 
+/* global getInsertableElement */
+/* global insertBefore */
+
 _.extend.empty = function () {
     this.el.forEach(item => item.innerHTML = '');
 
@@ -11,5 +14,32 @@ _.extend.empty = function () {
 _.extend.remove = function () {
     this.el.forEach(item => item.parentNode.removeChild(item));
 
+    return this;
+};
+
+_.extend.append = function (stringOrObject) {
+    this.el.forEach(item => item.appendChild(getInsertableElement(stringOrObject)));
+
+    return this;
+};
+
+_.extend.prepend = function (stringOrObject) {
+    this.el.forEach(
+        item => insertBefore(stringOrObject, item, 'firstChild'));
+
+    return this;
+};
+
+_.extend.after = function (stringOrObject) {
+    this.el.forEach(
+        item => insertBefore(stringOrObject, item, 'nextSibling', true));
+
+    return this;
+};
+
+_.extend.before = function (stringOrObject) {
+    this.el.forEach(
+        item => insertBefore(stringOrObject, item, 'self', true));
+
     return this;
 };

src/manipulation.js

@@ -45,4 +45,38 @@ const maybeMultiple = s => typeof s === 'string' ? justifyString(s).split(' ') :
 
 // Dom String Format
 // eslint-disable-next-line
-const toDomString = s => s.substr(0, 1).toLowerCase() + s.split('-').map(chunk => chunk.charAt(0).toUpperCase() + chunk.slice(1)).join('').substring(1);
+const toDomString = s => s.substr(0, 1).toLowerCase() + s.split('-').map(chunk => chunk.charAt(0).toUpperCase() + chunk.slice(1)).join('').substring(1);
+
+// Element from string
+// eslint-disable-next-line
+const elementFromString = s => {
+    if (typeof s === 'string') {
+        let template = document.createElement('template');
+        template.innerHTML = s.trim();
+
+        return template.content.firstChild;
+    }
+
+    return s;
+};
+
+// Insertable Element
+// eslint-disable-next-line
+const getInsertableElement = s => {
+    let insertableElement = elementFromString(s);
+
+    if (insertableElement instanceof uxr) {
+        insertableElement = insertableElement.el[0];
+    }
+
+    return insertableElement;
+};
+
+// InserBefore
+// eslint-disable-next-line
+const insertBefore = (insert, target, ref, parent) => {
+    let to = parent === true ? target.parentNode : target;
+    let where = ref === 'self' ? target : target[ref];
+
+    to.insertBefore(getInsertableElement(insert), where);
+};