Как добавить в новый созданный div элементы, в зависимости от выбора option в select?

Question

[Сергей Корольков]

В этой форме addField() добавляет поле в конец контейнера, а removeField() удаляет. Метод addElement() добавляет в div с классом "content" textarea или input type="text" в зависимости от выбора в селекте.

<form>	
		<div id="container">
			<div class="field">
				<select class="selectBox" onchange="addElement(this);">
					<option value='textarea'>Textarea</option>
					<option value='input'>Text</option>
				</select>
				<div class='content'>
			
				</div>
				<input type="submit" value="Удалить поле" onclick="removeField(this);"><br>
				<input type="checkbox" required/><br> 
			</div>
		</div>
		<input type="submit" value="Добавить поле" onclick="addField(this);"><br><br>
	</form>

Но у меня не получается написать addElement() так, чтобы он добавлял элементы в новом диве созданным методом addField().
Это код добавления поля в конец контейнера:

function addField(btn) {
  var form = btn.closest("form");
  if (form) {
    var div1 = form.querySelector(".field");
    if (div1) {
      var div = document.createElement("div");
      div.className = div1.className;
      div.innerHTML = div1.innerHTML;
      document.getElementById('container').appendChild(div);
    }
  }
}

А это код addElement(), в котором я вроде взял элемент селект, но не могу им создать в контенте. Чтобы каждый созданный див методом addField() создавал свой content при выборе в селекте (text или textarea):

function addElement (elem) {
	var selectBox = elem.closest("select");
	var selectedValue = selectBox.options[selectBox.selectedIndex].value;
 	var newElem = document.createElement(selectedValue);
     //???????????????????????????????
}

Answer 1

[Алексей]

function addElement (elem) {

  let parent = elem.parentNode; //Находим родителя в котором находится селект
  let content = parent.querySelector('.content'); // <- Ваш див с классом content внутри родителя


  var selectBox = elem.closest("select");
  var selectedValue = selectBox.options[selectBox.selectedIndex].value;
 	var newElem = document.createElement(selectedValue);
}

Comments

[Сергей Корольков]

Да, элементарно, спасибо!