как правильно добавлять динамически элементы в дом?
 

Здравствуйте!.
Получаю данные из базе и передаю их в js:

<?= "<script> testFunction(" . $data . ")</script>"?>

Интересует, это самый плохой вариант?. Есть ли лучший вариант?(без AJAX).

Дальше я вывожу его на странице и столкнулся с вопросом, а правильно ли это?
Вопросы о том, почему я это не делаю в php, ответ: не хочу нагружать сервер циклами или чем то другим.

Вариант 1:

function testFunction(data){
   let list = "";
   for(let n = 0, lengthN = data.length; n < lengthN; n++){
     list +="<li><a href=\"#\">test "+n+"</li>";
   }
document.getElementsByClassName("menu")[0].innerHTML = list;
}

Искал информацию за innerHTML встретил много за и против..

Вариант 2:
использовать appendChild().

Что лучше использовать в таком случае? (без использование сторонних
библиотек).

innerHTML в современном мире ничем не хуже appendChild, тем более на больших кусках кода.
А вот на счёт "не нагружания" сервера циклами - это перебор. PHP для того и предназначен. Разницы меж тем, что выделаете сейчас, и php-циклом, выводящим сразу html, сервер вообще не заметит.)

Спасибо за ответ!)