Как исправить ошибку кода "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>
Простите за такой, возможно, не правильный код для моей задачи, я не программист. Прошу помощи, если можно сделать грамотнее, и исправить ошибку!