Методы вставки cсозданых элементов

Question

Есть js код, который при нажатии на кнопку создает элементы(дивы, инпуты). Никак не могу понять как правильно выводить чтоб получался такой html код с дочерними элементами

<div id="dd">
  <div class="block-forms block-one" id="1">
    <div class="text-console">Заголовок №1</div>
    <input type="text" name="title-H2-1">
    <div class="text-console">Текст</div>
    <textarea rows="3" cols="70" name="text-1"></textarea>
    <div id="new-input-one">
        <div class="block-input-one block-input" id="1">
            <span class="text-console">Текст</span>
            <input type="text" class="input-type name" name="name1[]">
            <span class="text-console">Текст</span>
            <input type="number" class="input-type value" min="1" max="4" name="value1[]">
        </div>
    </div>
    <input type="button" class="button-field add-field-one" value="Добавить ответ">
   </div>
</div>

Js код

$(function () {
$(document).on("click", "input[type='button'][class='add-new-block']", add_field_one);
});

let val_one = 1;

function add_field_one() {
val_one++;

if (val_one >= 11) {
    alert("не более 10 блоков");
    return;
}

let div_one = document.createElement('div');
    div_one.className = "block-forms block-one";

let div_two = document.createElement('div');
    div_two.className = "text-console";
    div_two.innerHTML = "Заголовок № " + val_one;

let input_title = document.createElement('input');
    input_title.type = "text";
    input_title.name = "title" + val_one;

let div_three = document.createElement('div');
    div_three.className = "text-console";
    div_three.innerHTML = "Текст № " + val_one;

let textarea = document.createElement('textarea');
    textarea.rows = "3";
    textarea.cols = "70";
    textarea.name = "text-" + val_one;

let div_four = document.createElement('div');
    div_four.className = "text-console";
    div_four.innerHTML = "Текст";

let block_answer = document.createElement('div');
    block_answer.className = "block-answer";

let input_answer = document.createElement('input');
    input_answer.type = "text";
    input_answer.name = "name" + val_one + "[]";

let div_answer = document.createElement('div');
    div_answer.className = "text-console";
    div_answer.innerHTML = "Текст";

div_one.id = val_one;
let del_one = '<input type="button" class="button-field del-field-one" value="Удалить" onclick="javascript:del_field_one(' + val_one + ')">';
div_one.innerHTML = document.getElementById('block-one-hidden').innerHTML + del_one;
document.getElementById('dd').append(div_one)/* продолжить вставку созданных элементов */;
}

function del_field_one(eleId_one) {
doc_one = document;
let ele_one = doc_one.getElementById(eleId_one);
let parentEle_one = doc_one.getElementById('dd');
parentEle_one.remove(ele_one);
}

Answer 1

Не лучше ли запихнуть html код в строчку. Вставляя в неё то, что у вас изменяется.

Например ниже я привел код, который добавляет то, что вы хотите в <div id="dd"> при этом номер заголовка изменяется.

По такому примеру вы можете изменять что угодно.

$(function () {
$(document).on("click", "input[type='button'][class='add-new-block']", add_field_one);
});

let val_one = 1;

function add_field_one() {

let temp = (`
    <div class="block-forms block-one" id="${ val_one }">
      <div class="text-console">Заголовок №${ val_one }</div>
      <input type="text" name="title-H2-${ val_one }">
      <div class="text-console">Текст</div>
      <textarea rows="3" cols="70" name="text-${ val_one }"></textarea>
      <div id="new-input-one">
        <div class="block-input-one block-input">
          <span class="text-console">Текст</span>
          <input type="text" class="input-type name" name="name1[]">
          <span class="text-console">Текст</span>
          <input type="number" class="input-type value" min="1" max="4" name="value1[]">
        </div>
      </div>
      <input type="button" class="button-field add-field-one" value="Добавить ответ">
    </div>
  `);

val_one++;

if (val_one >= 11) {
    alert("не более 10 блоков");
    return;
}

let e = document.createElement('div');
e.innerHTML = temp;
let element = document.getElementById("bb");

while(e.firstChild) {
    element.appendChild(e.firstChild);
}

}

function del_field_one(eleId_one) {
doc_one = document;
let ele_one = doc_one.getElementById(eleId_one);
let parentEle_one = doc_one.getElementById('dd');
parentEle_one.remove(ele_one);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class='add-new-block' value="Click!"/>
<div id="bb">

</div>

Answer 2

"Руками" создавать все элементы - можно, но это больно и мучительно. Можно вставить весь HTML тупо одной строкой. `обратные ${ переменная } кавычки` допускают многострочную запись.

* Убрал из HTML второй id="1" по определению, id должны быть уникальными на странице.

$(document).on("click", 'input[type="button"][class="add-new-block"]', add_field_one);

let blocks_created = 1;

function add_field_one() {
  if (blocks_created >= 10) {
    alert("Не более 10 блоков");
    return;
  }

  blocks_created++;
  
  let i = blocks_created;

  let html = (`
    <div class="block-forms block-one" id="${ i }">
      <div class="text-console">Заголовок №${ i }</div>
      <input type="text" name="title-H2-${ i }">
      <div class="text-console">Текст</div>
      <textarea rows="3" cols="70" name="text-${ i }"></textarea>
      <div id="new-input-one">
        <div class="block-input-one block-input">
          <span class="text-console">Текст</span>
          <input type="text" class="input-type name" name="name1[]">
          <span class="text-console">Текст</span>
          <input type="number" class="input-type value" min="1" max="4" name="value1[]">
        </div>
      </div>
      <input type="button" class="button-field add-field-one" value="Добавить ответ">
    </div>
  `);

  document.getElementById("dd").insertAdjacentHTML("beforeEnd", html);
}

.block-forms {
  margin: 4px;
  padding: 4px;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="button" class="add-new-block" value="Test">

<div id="dd">
  <div class="block-forms block-one" id="1">
    <div class="text-console">Заголовок №1</div>
    <input type="text" name="title-H2-1">
    <div class="text-console">Текст</div>
    <textarea rows="3" cols="70" name="text-1"></textarea>
    <div id="new-input-one">
      <div class="block-input-one block-input">
        <span class="text-console">Текст</span>
        <input type="text" class="input-type name" name="name1[]">
        <span class="text-console">Текст</span>
        <input type="number" class="input-type value" min="1" max="4" name="value1[]">
      </div>
    </div>
    <input type="button" class="button-field add-field-one" value="Добавить ответ">
  </div>
</div>

БЛОГ НА HUSL

Методы вставки cсозданых элементов

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