Добавление элемента по кнопке JS

Question

я бы хотел узнать, как по кнопке и по id элемента добавить его

var btns = document.getElementsByClassName('intro__btn');
    var Range = document.getElementById('myRange');
var par = document.getElementsByClassName('main');
btns[0].onclick = function() {
  par[0].classList.add('#Range');
  par[0].classList.add("control");
}
btns[1].onclick = function() {
  par[0].classList.remove('#Range');
  par[0].classList.remove("control");
}

Answer 1

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

// Ищем элементы
const output = document.querySelector('.output');
const button = document.querySelector('.btn');
const input  = document.querySelector('.text');

function send() {
  if(input.value === "") return; // Выходим из функции, если отправлять нечего

  let newMessage = document.createElement('div'); // Создаём новый <div>. На странице его ещё нет
  newMessage.classList.add('color'); // Присваиваем ему класс сообщения
  newMessage.textContent = input.value; // Вставляем туда текст
                                        // Не innerHTML, так как через него можно вставить скрипты
  output.appendChild(newMessage); // Добавляем сообщение в HTML
  input.value = ""
}

button.addEventListener('click', send); // Так лучше добавлять события

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.content{
  width:230px;
  height:200px;
  background-color:#abc;
  position:relative;
}
.flex{
  position:absolute;
  bottom:0px;
  display:flex;
  justify-content:flex-end;
  width:100%;
}
.output{
  width:100%;
  height:90%;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  flex-direction: column;
}
.color{
  background-color:blue;
  border-radius:5px;
  color:white;
  padding:10px;
}

<div class = "content">
      <div class = "output"></div>
      <div class = "flex"><input type = "text" class = "text"><button class = "btn">SEND</button></div>
    </div>

БЛОГ НА HUSL

Добавление элемента по кнопке JS

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