Рони, я вас понял. Извиняюсь, что запутал. Сейчас попробуй объяснить так, как вы просите.
вот есть JS:
var loadALL = document.createElement('div'),
sortElUp = document.createElement('div'),
sortElDown = document.createElement('div'),
DelUnTop = document.createElement('div'),
y = document.createTextNode('Подгрузить');
sortElDown.innerHTML = 'Сортировать на ввод'
sortElUp.innerHTML = 'Сортировать на вывод'
DelUnTop.innerHTML = 'Убрать непопулярное'
sortElUp.setAttribute('class','AllBtnSU')
DelUnTop.setAttribute('class','UnTop')
sortElDown.setAttribute('class','AllBtnSD')
loadALL.setAttribute('class','AllBtn')
loadALL.appendChild(y)
$('div.block__header__wrap').after(loadALL)
$('div.AllBtn').wrap('<div class="Button">')
$('div.Button').append(sortElUp)
$('div.Button').append(sortElDown)
$('div.Button').append(DelUnTop)
Этот JS будут через расширение внедрён на сайт и создаст там два нужных div'a:
1 - sortElUp
2 - sortElDown
Далее им присваивается class
sortElUp.setAttribute('class','AllBtnSU')
sortElDown.setAttribute('class','AllBtnSD')
Ниже будет вырезанная часть страницы с материалом, что нужно отсортировать. Отменяю,
что отсортировать нужно .item по критерию .parseDataPRGREEN и .parseDataPRRED.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="items" id="inventory_bot">
<div class="item" id="12938478918">
<div class="c">
<span class="p5"></span>
</div>
<div class="im problem_images" style="background-image: url('https://pic.money/kbn_s.jpg?v=16')"></div>
<div class="r">
<span class="float_item"></span>
</div>
<div class="f2">
<span>x</span>1<svg class="f_s">
<use xlink:href="#svg-icon-star" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
</div>
<div class="p">
<span>$</span> 2.77
</div><a class="link-btn" href="https://ru.opskins.com/?loc=shop_search&app=730_2&search_item=eSports%20Key&sort=lh" target="_blank">OP</a>
<div class="parse-btn parse-done">
<div class="parseDataPRGREEN">
-42.49
</div>
<div class="parseDataPRRED">
51.8
</div>
<div class="parse-data-price">
1.77$
</div>
</div>
</div>
<div class="item" id="12936889139">
<div class="c">
<span class="p5"></span>
</div>
<div class="im problem_images" style="background-image: url('https://pic.money/j9z_s.jpg?v=16')"></div>
<div class="r">
<span class="float_item"></span>
</div>
<div class="f2">
<span>x</span>1<svg class="f_s">
<use xlink:href="#svg-icon-star" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
</div>
<div class="p">
<span>$</span> 2.76
</div><a class="link-btn" href="https://ru.opskins.com/?loc=shop_search&app=730_2&search_item=Chroma%20Case%20Key&sort=lh" target="_blank">OP</a>
<div class="parse-btn parse-done">
<div class="parseDataPRGREEN">
-41.96
</div>
<div class="parseDataPRRED">
50.4
</div>
<div class="parse-data-price">
1.78$
</div>
</div>
</div>
<div class="item" id="12939336365">
<div class="im" style="background-image: url('https://pic.money/jgq_s.jpg?v=16')"></div>
<div class="r">
FN <span class="float_item"></span>
</div>
<div class="f">
<span>x</span>1<svg class="f_s">
<use xlink:href="#svg-icon-star" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
</div>
<div class="p">
<span>$</span> 2.74
</div><svg class="st">
<use xlink:href="#stattrak-small" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg><a class="link-btn" href="https://ru.opskins.com/?loc=shop_search&app=730_2&search_item=StatTrak%E2%84%A2%20CZ75-Auto%20|%20Imprint%20(Factory%20New)&sort=lh" target="_blank">OP</a>
<div class="parse-btn parse-done">
<div class="parseDataPRGREEN">
127.96
</div>
<div class="parseDataPRRED">
-61.7
</div>
<div class="parse-data-price">
6.94$
</div>
</div>
</div>
<div class="item" id="12938672308|12938547743">
<div class="c">
<span class="a">Все</span>
</div>
<div class="im problem_images" style="background-image: url('https://pic.money/kvs_s.jpg?v=16')"></div>
<div class="r">
<span class="float_item"></span>
</div>
<div class="f1">
<span>x</span>2<svg class="f_s">
<use xlink:href="#svg-icon-star" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
</div>
<div class="p">
<span>$</span> 2.74
</div>
<div class="ws">
<span class="cr">+</span>
</div><a class="link-btn" href="https://ru.opskins.com/?loc=shop_search&app=730_2&search_item=Chroma%202%20Case%20Key&sort=lh" target="_blank">OP</a>
<div class="parse-btn parse-done">
<div class="parseDataPRGREEN">
-41.53
</div>
<div class="parseDataPRRED">
49.31
</div>
<div class="parse-data-price">
1.78$
</div>
</div>
</div>
<div class="item" id="12939156444">
<div class="im" style="background-image: url('https://pic.money/k6b_s.jpg?v=16')"></div>
<div class="r">
FN <span class="float_item"></span>
</div>
<div class="f">
<span>x</span>1<svg class="f_s">
<use xlink:href="#svg-icon-star" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg>
</div>
<div class="p">
<span>$</span> 2.35
</div><a class="link-btn" href="https://ru.opskins.com/?loc=shop_search&app=730_2&search_item=MAC-10%20|%20Fade%20(Factory%20New)&sort=lh" target="_blank">OP</a>
<div class="parse-btn parse-done">
<div class="parseDataPRGREEN">
-36.04
</div>
<div class="parseDataPRRED">
36.5
</div>
<div class="parse-data-price">
1.67$
</div>
</div>
</div>
</div>
</body>
</html>
Суть в том, чтобы при нажатии на мой динамически созданный div.AllBtnSU и div.AllBtnSD происходила сортировка.
Так же ниже прикрепляю картинки которые должны придать ясности.
