HTML DOM getElementById () - Node JS

Question

У меня есть этот код, который добавляет ценность различным частям моей html страницы на основе идентификатора этого элемента, код работает отлично, без проблем, но я ищу лучшее и эффективное решение для замены всех getelementbyid функция, если есть, конечно,

, что означает, что есть другой метод, чтобы уменьшить размер кода ниже и заменить его другим

мой код ниже:

$('#public-event').modal('show');
        $.ajax({
            type: 'GET',
            dataType: 'json',
            url: '/envoi/update/' + id,
        })
            .done(function (data) {
                var html = ""
                console.log(data);

                for (let i = 0; i < data.length; i++) {
                    if (id === data[i].events._id) {
                        console.log(data[i].events.title)
                        document.getElementById("title").innerHTML = data[i].events.title;
                        document.getElementById("eventDateTime").innerHTML = `${data[i].events.eventDate} at ${data[i].events.targetReminder} | ${data[i].events.targetAmPM}`;
                        document.getElementById("createBy").innerHTML = data[i].events.author;
                        document.getElementById("dateCreation").innerHTML = data[i].events.author;
                        document.getElementById("description").innerHTML = data[i].events.caption;
                        document.getElementById("pubpriv").innerHTML = data[i].events.category;
                        document.getElementById("location").innerHTML = data[i].events.location;
                        $('#monImage').attr('src', 'img/sam.jpg');
                        $('#eventImage').attr('src', 'uploads/' + data[i].events.img);
                        document.getElementById("deleteButtn").setAttribute('data-id', data[i].events._id);
                        document.getElementById("completeButtn").setAttribute('data-id', data[i].events._id);
                        document.getElementById("CommentButtn").setAttribute('data-id', data[i].events._id);
                        document.getElementById("CommentButtn").setAttribute('data-content', data[i].events.author);
                        document.getElementById("likeButton").setAttribute('data-id', data[i].events._id);
                        document.getElementById("likeButton").setAttribute('data-content', data[i].events.author);
                        document.getElementById("showComment").setAttribute('data-id', data[i].events._id);
                        document.getElementById("comment-number").innerHTML = data[i].events.comments.length +' Comments';
                        //to modify imges with dynamic
                    }

Спасибо за любое предложение,

С уважением,

Answer 1

Ваш код состоит из нативных JS и jQuery, причем нативный является более подробным. Собственный слоган jQuery: «пиши меньше, делай больше» - так что это одно замечание, от которого стоит отталкиваться. Но также некоторые элементы требуют определенного типа форматирования, поэтому это требует явных инструкций. Вы также можете объединить повторяющиеся значения в один оператор.

$('#title').text(data[i].events.title)
$('#eventDateTime').text(`${data[i].events.eventDate} at ${data[i].events.targetReminder} | ${data[i].events.targetAmPM}`)
$('#createBy, #dateCreation').text(data[i].events.author)
$('#description').text(data[i].events.caption)
$('#pubpriv').text(data[i].events.category)
$('#location').text(data[i].events.location)
$('#monImage').attr('src', 'img/sam.jpg')
$('#eventImage').attr('src', 'uploads/' + data[i].events.img)
$('#deleteButtn, #completeButtn, #CommentButtn, #likeButton, #showComment').attr('data-id', data[i].events._id)
$('#CommentButtn, #likeButton').attr('data-content', data[i].events.author)
$('#comment-number').text(`${data[i].events.comments.length} Comments`)

Также стоит использовать .text вместо .html, если ваши значения действительно являются просто текстом и не содержат HTML. В противном случае без вреда замена на .html.