Добавление элементов в html collection
[IMG]https://ibb.co/ggCWQdr[/IMG
Здравствуйте,помогите пожалуйста.Хочу добавить на сайт новую информацию которая срабатывает при клике по кнопке добавить ]добавлялась характеристика, в уже имеещийся список характеристик список, которую я ввожу в инпут.
<div class="wrapper">
<p class="wrapper_text">1. Двойной обод</p>
<p class="wrapper_text">3. Колеса диаметром 26 дюймов</p>
<p class="wrapper_text">2. Алюминиевый сплав</p>
<p class="wrapper_text">4. Покрышки 26х1,95"</p>
</div>
<div class="add_1">
<h1 class="add_1-title">Добавить характеристику</h1>
<input type="text" class="add_1-input">
<button class="add_1-button">Добавить</button>
</div>
|
Jellockz,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.wrapper {
counter-reset: num 0;
}
.wrapper .wrapper_text:before {
counter-increment: num;
content: counter(num)'. ';
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let button = document.querySelector(".add_1-button"),
div = document.querySelector(".wrapper"),
input = document.querySelector(".add_1-input");
button.addEventListener("click", function() {
let txt = input.value.trim();
if (txt) {
let [a, ...b] = txt;
txt = a.toUpperCase() + b.join("").toLowerCase();
div.insertAdjacentHTML("beforeend", `<p class="wrapper_text">${txt}</p>`);
};
input.value = "";
})
})
</script>
</head>
<body>
<div class="wrapper">
<p class="wrapper_text">Двойной обод</p>
<p class="wrapper_text">Колеса диаметром 26 дюймов</p>
<p class="wrapper_text">Алюминиевый сплав</p>
<p class="wrapper_text">Покрышки 26х1,95"</p>
</div>
<div class="add_1">
<h1 class="add_1-title">Добавить характеристику</h1>
<input type="text" class="add_1-input">
<button class="add_1-button">Добавить</button>
</div>
</body>
</html>
|
Спасибо большое.
|
| Часовой пояс GMT +3, время: 05:20. |