(я не знаю как это правильно и кратко описать, но в основной части есть картинки и я думаю вы поймете )

Question

Хочу сделать чат и нашёл одну проблему если на отправку сообщение написать не обычный текст а HTML тег то выведется его содержимое

вот код который отвечает за отправку сообщения текст для отправки находиться в input.value

messages.innerHTML += `<div class="mymessagecell" id="msg${count}"><div class="message">${input.value}<time>${getcurrtime()}</time></div>${initmsgtools(count)}</div>`

Answer 1

Не используйте innerHTML, когда работаете с данными от пользователя. Это небезопасно как раз по таким причинам. Вместо этого используйте свойство textContent, тогда всегда будет текст, что бы там ни было.

const messages = document.querySelector('.messages');
const template = document.querySelector('.template__message');
const form = document.querySelector('.form');
const input = form.querySelector('.form__input');

// Функция создает новый пустой элемент из шаблона
function getMessageElement() {
  return template.content.querySelector('.message').cloneNode(true);
}

// Обработка нажатия на кнопку
form.addEventListener('submit', (evt) => {
  // Отмена стандартной отправки формы
  evt.preventDefault();
  
  // Создание нового элемента сообщений
  const messageElement = getMessageElement();
  const textElement = messageElement.querySelector('.message__text');
  const timeElement = messageElement.querySelector('.message__time');
  
  // Заполнение элемента
  textElement.textContent = input.value;
  timeElement.textContent = new Date();
  
  // Вставка сообщения
  messages.append(messageElement);
});

<form class="form">
  <input class="form__input" type="text">
  <button class="form__submit" type="submit">Отправить</button>
</form>

<div class="messages">
</div>

<template class="template__message">
  <div class="message">
    <p class="message__text"></p>
    <time class="message__time"></time>
    <hr>
  </div>
</template>

БЛОГ НА HUSL

(я не знаю как это правильно и кратко описать, но в основной части есть картинки и я думаю вы поймете )

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