Everybody_Lies

window.open

1. Вы не правильно обращаетесь к элементам. Используйте querySelector, querySelectorAll, getElementById
2. Определяйте переменные не в начале программы, а в момент нажатия кнопки, потому что при инициализации они будут пустыми.
3. Для того, чтобы строку преобразовать в node и вставить в DOM дерево, используйте не append, а insertAdjacentHTML
4. Внутри тега tr, должны находиться td'шки, а у вас он сразу же закрывается. Поэтому tr нужно открывать перед вложенным циклом, а закрывать после него.

// экранируешь кавычки одинарным обратным слешем
$str = "<a href=\"javascript:void(0)\" onclick=\"hide('div_1')\">";
$str = '<a href="javascript:void(0)" onclick="hide(\'div_1\')">';

// получаем атрибут
const color = el.getAttribute('data-color');
// устанавливаем его
el.classList.add(color);

document.querySelector('.sts').innerText;
Если элементов с классом sts у вас несколько, то
document.querySelector('#kot .sts').innerText;

у тебя пустой DOM, есть только body.
1. В первой ф-ии ты создаешь div и p, а styleTest у тебя будет равен null, потому что querySelector ищет в DOM дереве .styleClassTest, а его на данном этапе там нет. У тебя есть p с этим классом, но он ещё никуда не добавлен, а просто находится в переменной. Затем ты добавляешь свою матрёшку в body и делаешь проверку и она уже проходит, но styleTest.style.color = 'yellow' не срабатывает, потому что как ты помнишь в переменной styleTest у тебя null.
2. Едем дальше, вторая ф-я всё тоже самое, НО в DOM дереве у тебя уже есть элемент с классом .styleClassTest, поэтому одноимённая переменная уже будет не пустой и ей в условии ниже ты и задаёшь жёлтый цвет.

Если у вас только два неизменяемых варианта заголовка, то можете просто задать условие если не первое, то второе. Если у вас текст может меняться несколько раз, то предыдущее состояние нужно где то хранить. В примере я сделал через data атрибут, но вы можете хранить где вам удобно.

Если параметр опущен, возвращённый массив будет содержать один элемент со всей строкой. Если параметр равен пустой строке, строка str будет преобразована в массив символов.

split

let a = document.querySelectorAll('.p-6').length
точку перед p-6 забыли указать