Как создать функцию javascript, которая динамически добавляет элементы html?
Я пытаюсь создать функцию javascript, которая добавляет новые элементы html с новыми идентификаторами для каждого элемента. например эта форма; Чтобы пользователь мог указать языки, на которых он может говорить, и свой уровень на каждом из них. Но он может добавить новый ввод для ввода других языков, если он говорит на многих.
<form id = "form">
Language spoken1: <input id = "language1">
Level: <input id = "level1">
<form>
<input type = "button" value = "add new language" id = "add" onclick = "myFunction">
Чтобы получить такой результат
<form id = "form">
Language spoken1: <input id = "language1">
Level: <input id = "level1">
Language spoken2: <input id = "language2">
Level: <input id = "level2">
<form>
<input type = "button" value = "add new language" id = "add" onclick = "myFunction">
И когда он отправит результат, подобный этому будет на странице
Разговорный язык1: английский, уровень: родной Разговорный язык2: испанский, уровень: хороший
Я новичок, братан, просто скажи мне тему этой технологии, и я скажу, это html dom, appendchild и setatribute? я пытаюсь
Без серверной технологии, такой как вход на веб-сервер и базу данных, изменения, которые делает пользователь, теряются, как только он перезагружает страницу.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете использовать document.getElementById("ID").innerHTML
document.getElementById("form").innerHTML='Language spoken1:<input id = "language1"> Level: <input id = "level1"><br> Language spoken2: <input id = "language2"> Level: <input id = "level2">'<form id = "form">
</form>
<input type = "button" value = "add new language" id = "add" onclick = "myFunction">это не сработало, братан, я буду больше изучать js и html dom, я просто был рад сделать это как можно скорее;)
Каждый раз, когда вы нажимаете кнопку, он создает два элемента ввода, подсчитывает существующие входы и находит количество новых идентификаторов ввода. Я также добавил автофокус на ввод, после добавления... и кнопки удаления)
(function(){
let form = document.getElementById('form');
document.getElementById('add').addEventListener('click', function(){
let lang = document.createElement('input');
let level = document.createElement('input');
let number = document.querySelectorAll('#form input').length / 2 + 1;
lang.id = 'language' + number;
level.id = 'level' + number;
lang.placeholder = 'Language spoken' + number;
level.placeholder = 'Level';
form.innerHTML += '<br>';
form.appendChild(lang);
form.appendChild(level);
lang.focus();
});
document.getElementById('delete').addEventListener('click', function(){
let inp = document.querySelectorAll('#form input');
if (inp.length == 2){ return; }
/* removing last two elements */
inp[inp.length-1].remove();
inp[inp.length-2].remove();
let br = document.querySelectorAll('#form br');
br[br.length-1].remove();
});
})();#delete {
color: white;
background-color: #c00;
border: 2px solid #c00;
outline: none;
cursor: pointer;
}
#form {white-space: inherit;}
input {margin: 2px 5px;}<form id = "form">
<input id = "language1" placeholder = "Language spoken1"><input id = "level1" placeholder = "Level">
</form>
<br>
<input type = "button" value = "add a new language" id = "add">
<input type = "button" value = "X" id = "delete">Любые вопросы?)
Спасибо, братан☺ Это не 100%, но, по крайней мере, я могу пойти дальше и попробовать больше. Мне нужна кнопка submate или save, чтобы сохранить ее и отобразить входное значение в <ul> .... проще ли сделать такую функцию на php или других бэкэндах? Я еще не дошел?
Существует миллион технологий и способов добиться этого. Выберите один, попробуйте, а затем вернитесь с конкретной проблемой программирования, если вы столкнетесь с ней.