JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button class="sort-elements">Сортировать</button>
<div class="title">Обычно</div>
<div class="sorting">
<ul class="elements">
<li>Элементы</li>
<li>Для</li>
<li>Проверки</li>
<li>Сортировки</li>
<li>На</li>
<li>jQuery</li>
</ul>
</div>
JavaScript
function toJSON(node) {
node = node || this;
var obj = {
nodeType: node.nodeType
};
if (node.tagName) {
obj.tagName = node.tagName.toLowerCase();
} else
if (node.nodeName) {
obj.nodeName = node.nodeName;
}
if (node.nodeValue) {
obj.nodeValue = node.nodeValue;
}
var attrs = node.attributes;
if (attrs) {
var length = attrs.length;
var arr = obj.attributes = new Array(length);
for (var i = 0; i < length; i++) {
attr = attrs[i];
arr[i] = [attr.nodeName, attr.nodeValue];
}
}
var childNodes = node.childNodes;
if (childNodes) {
length = childNodes.length;
arr = obj.childNodes = new Array(length);
for (i = 0; i < length; i++) {
arr[i] = toJSON(childNodes[i]);
}
}
return obj;
}
function toDOM(obj) {
if (typeof obj == 'string') {
obj = JSON.parse(obj);
}
var node, nodeType = obj.nodeType;
switch (nodeType) {
case 1: //ELEMENT_NODE
node = document.createElement(obj.tagName);
var attributes = obj.attributes || [];
for (var i = 0, len = attributes.length; i < len; i++) {
var attr = attributes[i];
node.setAttribute(attr[0], attr[1]);
}
break;
case 3: //TEXT_NODE
node = document.createTextNode(obj.nodeValue);
break;
case 8: //COMMENT_NODE
node = document.createComment(obj.nodeValue);
break;
case 9: //DOCUMENT_NODE
node = document.implementation.createDocument();
break;
case 10: //DOCUMENT_TYPE_NODE
node =...