Не работает clip: в CSS и append() или prepend() в JS, почему?

Question

На ноутбуке старом стоит Windows XP, Sublime Text соответствующий ОС, Хром такой же древний. На что грешить, если такая штука: clip: rect(); в CSS файле глупит и не работает, плагины вроде все стоят свежие(Emmet и всё такое...). А в JS не срабатывают добавления prepend() и append(), а так же перебрать элементы через for of и for in нормально не получается. Где косяк? Допустим:

for(let li of tree.querySelectorAll('li')){
    let span = document.createElement('span');
    span.classList.add('show');
    li.prepend(span);
    span.append(span.nextSibling);
}

Консоль выдает ошибки и каждый раз разные, то то не определено, то другое.

Это список обычный, его фрагмент. Решил от лени добавить элементов с классами к li

<ul id="tree" class="tree">
  <li>Products
    <ul>
      <li>Product 1</li>
      <li>Product 2</li>
      <li>Product 3</li>
    </ul>
  </li>
</ul>

выдает: Uncaught TypeError: tree.querySelectorAll(...)[Symbol.iterator] is not a function

Пробовал перебирать и обычным циклом, с предварительным объявлением переменной вне цикла, но тогда ругается на prepend и append

Answer 1

В коде нет ошибки. Проблема, собственно, в используемом старом браузере, append() доступен начиная с 54-й версии хрома

Можно заменить:

elem.append(node) → elem.appendChild(node)
elem.prepend(node) → elem.insertAdjacentElement("afterbegin", node)
Ну и for...of на обычный цикл со счетчиком

var li = tree.querySelectorAll('li');

for (var i = 0; i < li.length; i++) {
  var span = document.createElement('span');
  span.textContent = "Test ";
  span.classList.add('show');
  
  li[i].insertAdjacentElement("afterbegin", span);
  span.appendChild(span.nextSibling); 
}

<ul id="tree" class="tree">
  <li>Products
    <ul>
      <li>Product 1</li>
      <li>Product 2</li>
      <li>Product 3</li>
    </ul>
  </li>
</ul>

Или использовать полифиллы.

БЛОГ НА HUSL

Не работает clip: в CSS и append() или prepend() в JS, почему?

Ответы (1 шт):