В веб-разработке часто возникают сценарии, в которых мы хотим, чтобы пользователи динамически добавляли имена или элементы в список на экране. JavaScript предоставляет несколько методов для достижения этой функциональности, обеспечивая удобство взаимодействия с пользователем. В этой статье мы рассмотрим десять различных методов, каждый из которых сопровождается примером кода, чтобы продемонстрировать, как динамически добавлять имена в список с помощью JavaScript.

Метод 1: использование поля ввода и кнопки
HTML:

<input type="text" id="nameInput">
<button onclick="addName()">Add Name</button>
<ul id="nameList"></ul>

JavaScript:

function addName() {
  var nameInput = document.getElementById("nameInput");
  var nameList = document.getElementById("nameList");

  var li = document.createElement("li");
  li.appendChild(document.createTextNode(nameInput.value));

  nameList.appendChild(li);
  nameInput.value = "";
}

Метод 2: использование функции prompt()

var name = prompt("Enter a name:");
var nameList = document.getElementById("nameList");
var li = document.createElement("li");
li.appendChild(document.createTextNode(name));
nameList.appendChild(li);

Метод 3: использование функции confirm()

if (confirm("Do you want to add a name?")) {
  var name = prompt("Enter a name:");
  var nameList = document.getElementById("nameList");
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(name));
  nameList.appendChild(li);
}

Метод 4. Использование прослушивателя событий при нажатии клавиши Enter
HTML:

<input type="text" id="nameInput">
<ul id="nameList"></ul>

JavaScript:

var nameInput = document.getElementById("nameInput");
var nameList = document.getElementById("nameList");
nameInput.addEventListener("keyup", function(event) {
  if (event.key === "Enter") {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(nameInput.value));
    nameList.appendChild(li);
    nameInput.value = "";
  }
});

Метод 5: использование метода appendChild()с событиями клавиатуры
HTML:

<ul id="nameList"></ul>

JavaScript:

document.addEventListener("keydown", function(event) {
  var nameList = document.getElementById("nameList");

  var li = document.createElement("li");
  li.appendChild(document.createTextNode(event.key));
  nameList.appendChild(li);
});

Метод 6: использование метода insertAdjacentHTML()
HTML:

<input type="text" id="nameInput">
<button onclick="addName()">Add Name</button>
<ul id="nameList"></ul>

JavaScript:

function addName() {
  var nameInput = document.getElementById("nameInput");
  var nameList = document.getElementById("nameList");
  nameList.insertAdjacentHTML("beforeend", "<li>" + nameInput.value + "</li>");
  nameInput.value = "";
}

Метод 7. Использование jQuery
HTML:

<input type="text" id="nameInput">
<button id="addButton">Add Name</button>
<ul id="nameList"></ul>

JavaScript:

$("#addButton").click(function() {
  var nameInput = $("#nameInput").val();
  $("#nameList").append("<li>" + nameInput + "</li>");
  $("#nameInput").val("");
});

Метод 8. Использование Vue.js
HTML:

<div id="app">
  <input type="text" v-model="nameInput">
  <button @click="addName">Add Name</button>
  <ul>
    <li v-for="name in names" :key="name">{{ name }}</li>
  </ul>
</div>

JavaScript:

new Vue({
  el: "#app",
  data: {
    nameInput: "",
    names: []
  },
  methods: {
    addName() {
      this.names.push(this.nameInput);
      this.nameInput = "";
    }
  }
});

Метод 9: использование React

import React, { useState } from "react";
function App() {
  const [nameInput, setNameInput] = useState("");
  const [names, setNames] = useState([]);
  const addName = () => {
    setNames([...names, nameInput]);
    setNameInput("");
  };
  return (
    <div>
      <input type="text" value={nameInput} onChange={(e) => setNameInput(e.target.value)} />
      <button onClick={addName}>Add Name</button>
      <ul>
        {names.map((name, index) => (
          <li key={index}>{name}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;

Метод 10: использование Angular

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    <input type="text" [(ngModel)]="nameInput">
    <button (click)="addName()">Add Name</button>
    <ul>
      <li *ngFor="let name of names">{{ name }}</li>
    </ul>
  `
})
export class AppComponent {
  nameInput: string = "";
  names: string[] = [];
  addName() {
    this.names.push(this.nameInput);
    this.nameInput = "";
  }
}

В этой статье мы рассмотрели десять различных методов динамического добавления имен в список на экране с помощью JavaScript. Каждый метод предлагает уникальный подход, обеспечивающий гибкость для различных требований проекта. Предпочитаете ли вы традиционный JavaScript, jQuery или современные платформы, такие как Vue.js, React или Angular, теперь у вас есть широкий выбор вариантов. Не стесняйтесь экспериментировать с этими методами и адаптировать их к вашим конкретным потребностям в ваших проектах веб-разработки.