Сергей Соколов

Строка с HTML — это просто строка текста. Без слушателей событий и свойств DOM элементов.

Вариант: держать в строке плейсхолдер, скажем пустой div с определённым id или классом, и после вставки HTML в документ, заменять тот пустой див на супер-пупер элемент-с-событиями:

const datePicker = document.createElement("div");
datePicker.className = 'datePickerInline';
// тут накладываем на элемент всякие события

const str = '<div><span>Вставляем</span><div> <div class="replace_me"></div> </div><div><p>в уже готовые html элементы в виде строки</p></div></div>';

let el = document.getElementById('element');
el.innerHTML = str;

el.querySelector('div.replace_me').replaceWith(datePicker);

План-Б: не вешать слушателей событий прямо на элементы datePicker'а, а слушать его события выше, на общем родителе: скажем, на том el, в который всё это вставляется.

this там — это элемент li

const toDate = (str) => {
  const [date, month, year] = str.split('.');
  return Date.parse([year, month, date].join('-'));
}

const sorted = arr.sort((a, b) => toDate(a.date) - toDate(b.date))

• Pool – "пул", бассейн – что-то, где много чего-то. Пул соединений – позаимствовали оттуда одно, попользовались, вернули назад
  
• Poll – "полл", опрос – вы звоните кому-то и спрашиваете «есть чо?»
  

Читали, конечно же, Длинный опросы? — там и пример чата есть, и когда стоит использовать.

кол-во просмотров стрима в реальном времени, лайков поста или проверка онлайна пользователя на чем лучше реализовать

WebSocket лучше: сообщений много.

Можно сделать функцию, которая будет проходить по этим блокам и прятать все / показывать нужный.
Вызывать её при каждом изменении селекта, ну и в самом начале.

замените imgWrap.innerHTML = img;
на imgWrap.appendChild(img);

img у вас – объект HTMLElement, а не текст HTML.

Немного костыльно тут полагаться на requestAnimationFrame для разрыва двух анимаций.

Может, лучше сделать всё на CSS-анимациях?

откройте удивительный мир асинхронных функций!
Promise, async / await – вот это всё.

Результат появится не сразу и только внутри функции обработчика success

Можно сделать отрисовку всего списка, в которой решать, кого показывать, кого нет.
Вызывать её при любом изменении поля поиска – событие "input".
Если понятно, что ни один элемент не попал, показывать заглушку «Ничего не найдено»

Чтобы стало чуть «профессиональнее» сумейте сформулировать конкретные минусы обращения к свойствам innerHTML и innerText — и задать вопрос «как бы сделать то-то, но без такого-то недостатка».

Можно работать с узлами DOM-дерева: см. Node.children.

const expandNode = (node) => {
  node.after(...node.childNodes);
  node.remove();
}

[...document.getElementsByClassName("mark")]
.forEach(expandNode);

// Найти наибольшую длину среди массивов – столько будет строк
const maxLength = Math.max(...arrayOfObjTest.map(el => el.arr.length));

// Подготовить массив
const result = [];

// Заполнить каждую из строк i-ми элементами
for (let i = 0; i < maxLength; i++) {
  result[i] = arrayOfObjTest.map(el => el.arr[i] || 0);
}

Как раз с длиной всё очевидно. length – количество элементов массива:

[]; // сколько элементов? – 0
['a']; // сколько элементов: 1
['a', 'b', 'c']  // 3

Индексы начинают с нуля, потому, что индекс – это смещение.
Исторически, с низкоуровневых языков программирования.
В памяти под массив выделена некоторая память, начиная с адреса X.
Последовательно находятся ячейки одинаковой длины. Чтобы найти, где лежит значение i-го элемента, к адресу X прибавляют i * size байт. Самый первый элемент начинается сразу с адреса X. Его индекс 0.

Так же и со строкой в JavaScript: к буквам можно обращаться по индексу, как к элементам массива.

"abcd"[1] // "b"
"abcd"[3] // "d"

Представьте, что в начале строки стоит курсор. Курсор возвращает букву перед которой стоит. Индекс – на сколько вправо надо этот курсор подвинуть.

Эта особенность index / length общепринята во многих языках программирования. Так же, как для интервалов часто принято включать начало и исключать конец: [a; b) – например, в методе массива slice(), который вырезает кусок массива, если указать slice(1, 5) — вытащит элементы с индексами 1, 2, 3, 4 – включая 1-й, но не доходя до 5.