Как в JavaScript добавить id новому элементу?

Question

[Анатолий Выскуб]

Как добавить id для нового элемента Img?

Допустим мы создаем новый элемент IMG с классом 'comment__img' и я хочу добавить к этому элементу атрибут id = ' '. Чтобы в дальнейшем добавить этому элементу ссылку на картинку.

let newCommentHeader = document.createElement('div');
let newCommentImg = document.createElement('img');

  newCommentHeader.append(newCommentImg);
  newCommentImg.classList.add('comment__img');

Answer 1

[Алексей Ярков]

newCommentImg.setAttribure('id', 'новый_айди');
UPD: Ну опечатка же )) Надо писать setAttribute

Comments

[Анатолий Выскуб]

Не помогло. Всё это находится в обработчике событий вот полный код

let commentForm = document.querySelector('.comments__form');
let commentsList = document.querySelector('.comments__list');
let commentName = document.querySelector('.name');
let commentField = document.getElementById('comment');
let commentEmail = document.querySelector('.email');




commentForm.onsubmit = function (evt) {
  evt.preventDefault();

  let newComment = document.createElement('li');
  let newCommentHeader = document.createElement('div');
  let newCommentInner = document.createElement('div');
  let newCommentImg = document.createElement('img');
  let newCommentName = document.createElement('span');
  let newCommentText = document.createElement('span');

  commentsList.append(newComment);
  newComment.append(newCommentHeader);
  newCommentHeader.classList.add('comment__header');
  newCommentHeader.append(newCommentImg);
  newCommentImg.classList.add('comment__img');
  newCommentHeader.append(newCommentName);
  newCommentName.classList.add('comment__name');
  newCommentName.textContent = commentName.value;
  newComment.append(newCommentInner);
  newCommentInner.classList.add('comment__inner');
  newCommentInner.append(newCommentText);
  newCommentText.classList.add('comment__text');
  newCommentText.textContent = commentField.value;
  commentField.value = '';
  commentName.value = '';
  commentEmail.value = '';

};

[Анатолий Выскуб]

Пашенька, Если бы я так не пробовал, то не писал вопрос. Не работает.

[Алексей Ярков]

Анатолий Выскуб,

Не помогло

Так вы и не присваиваете ID в вашем коде ))

[Анатолий Выскуб]

Алексей Ярков, Я проверил, не сработало, отправил весь код.

[Анатолий Выскуб]

Алексей Ярков, Так не работает

let commentForm = document.querySelector('.comments__form');
let commentsList = document.querySelector('.comments__list');
let commentName = document.querySelector('.name');
let commentField = document.getElementById('comment');
let commentEmail = document.querySelector('.email');




commentForm.onsubmit = function (evt) {
  evt.preventDefault();

  let newComment = document.createElement('li');
  let newCommentHeader = document.createElement('div');
  let newCommentInner = document.createElement('div');
  let newCommentImg = document.createElement('img');
  let newCommentName = document.createElement('span');
  let newCommentText = document.createElement('span');

  commentsList.append(newComment);
  newComment.append(newCommentHeader);
  newCommentHeader.classList.add('comment__header');
  newCommentHeader.append(newCommentImg);
  newCommentImg.classList.add('comment__img');
  newCommentImg.setAttribure('id', 'новый_айди');
  newCommentHeader.append(newCommentName);
  newCommentName.classList.add('comment__name');
  newCommentName.textContent = commentName.value;
  newComment.append(newCommentInner);
  newCommentInner.classList.add('comment__inner');
  newCommentInner.append(newCommentText);
  newCommentText.classList.add('comment__text');
  newCommentText.textContent = commentField.value;
  commentField.value = '';
  commentName.value = '';
  commentEmail.value = '';

};

[Алексей Ярков]

Анатолий Выскуб, а опечатку исправить не смогли самостоятельно?

const newCommentImg = document.createElement('img')
newCommentImg.setAttribute('id', 'iddidididid');
newCommentImg.setAttribute('src', 'https://i.ytimg.com/vi/HWgstasR8mQ/maxresdefault.jpg');
document.body.append(newCommentImg);

[Анатолий Выскуб]

Пашенька, Я может чего-то не понимаю, это разве не присвоение?

newCommentHeader.append(newCommentImg);
  newCommentImg.classList.add('comment__img');
  newCommentImg.setAttribure('id', 'новый_айди');

[Анатолий Выскуб]

Пашенька, ну я просто копирнул с ответа. Ща исправлю

[Алексей Ярков]

Анатолий Выскуб,

ну я просто копирнул с ответа

Вы главное линуксовые команды так бездумно не копируйте ))

[Анатолий Выскуб]

Алексей Ярков, Только учусь. Извините за невнимательность, работает. Спасибо!

[Анатолий Выскуб]

Пашенька, Нет.

[Анатолий Выскуб]

Пашенька, когда я пытался прописать

Можно даже буквально так и писать
newCommentImg.id = 'новый_айди';
, но автор вопроса настолько не хочет ничего самостоятельно делать, что доходит до абсурда.

код работал до этой строчки, а дальше просто не выполнял оставшиеся действия.

[Алексей Ярков]

Анатолий Выскуб,

а дальше просто не выполнял оставшиеся действия

В этом случае в консоль пишется ошибка. Вот её надо читать и решать что дальше делать.

[Анатолий Выскуб]

Алексей Ярков, Понял, спасибо огромное, буду стараться!

[Алексей Ярков]

Анатолий Выскуб, удачи!

[User_Dmitry]

Алексей, большое спасибо!

Answer 2

[smigles]

Лучше работать со свойствами DOM:
newCommentImg.id = 'id';