Как исправить ошибку кода "Cannot read properties of null", чтобы он (не)выполнялся с (не)существующими элементами без ошибки. На чистом JS

Данный код вставлен в шапку конструктора Тильда, и он делает следующее на каждой странице: берет блок uc-gallery-1 и переносит его в обертку gallery-1. На каждой странице есть портфолио по 3-5 таких элементов, а так же есть главная странице где этих элементов вообще нет. Я понимаю, что ошибка появляется из-за того что элемент не существует на некоторых страницах.

Как сделать так, чтобы если какого либо элемента не существует на какой-либо странице, будь то например gallery-1 или gallery 4, то оно не считало это ошибкой, а как бы делало проверку по типу: ага, gallery-4 есть - значит выполняю код с ним, а gallery-5 нету, значит не выполняю с ним, без ошибок.

Ошибка в консоли если какого-то элемента нет на странице: Uncaught TypeError: Cannot read properties of null (reading 'append') at HTMLDocument.

Сам код:

<script>
document.addEventListener("DOMContentLoaded", function(event) {
    let galleryWrap1 = document.querySelector('.gallery-1');
    let galleryBlock1 = document.querySelector('.uc-gallery-1');
    
    let galleryWrap2 = document.querySelector('.gallery-2');
    let galleryBlock2 = document.querySelector('.uc-gallery-2');
    
    let galleryWrap3 = document.querySelector('.gallery-3');
    let galleryBlock3 = document.querySelector('.uc-gallery-3');
    
    let galleryWrap4 = document.querySelector('.gallery-4');
    let galleryBlock4 = document.querySelector('.uc-gallery-4');
    
    let galleryWrap5 = document.querySelector('.gallery-5');
    let galleryBlock5 = document.querySelector('.uc-gallery-5');
    
    galleryWrap1.append(galleryBlock1);
    galleryWrap2.append(galleryBlock2);
    galleryWrap3.append(galleryBlock3);
    galleryWrap4.append(galleryBlock4);
    galleryWrap5.append(galleryBlock5);
});
</script>

Кстати, в jquery такой ошибки нет, но мне нужен чистый JS.

<script>
$( document ).ready(function() {
    //Перемещаем блок в HTML Zero
    $(".uc-gallery-1").appendTo(".gallery-1");
    $(".uc-gallery-2").appendTo(".gallery-2");
    $(".uc-gallery-3").appendTo(".gallery-3");
    $(".uc-gallery-4").appendTo(".gallery-4");
    $(".uc-gallery-5").appendTo(".gallery-5");
});
</script>

Простите за такой, возможно, не правильный код для моей задачи, я не программист. Прошу помощи, если можно сделать грамотнее, и исправить ошибку!


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