Помогите перевести из jq в js

Рейтинг: -1Ответов: 2Опубликовано: 22.06.2023
  $(".add").on("click", function () {
$(".personal-adress-inner").append('<div class="web-form-item control"><textarea placeholder=" " ></textarea><div class="web-form-item-control"><div class="web-form-item-undis">     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">          <path d="M12 20H21" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>          <path d="M16.5 3.50001C16.8978 3.10219 17.4374 2.87869 18 2.87869C18.2786 2.87869 18.5544 2.93356 18.8118 3.04017C19.0692 3.14677 19.303 3.30303 19.5 3.50001C19.697 3.697 19.8532 3.93085 19.9598 4.18822C20.0665 4.44559 20.1213 4.72144 20.1213 5.00001C20.1213 5.27859 20.0665 5.55444 19.9598 5.81181C19.8532 6.06918 19.697 6.30303 19.5 6.50001L7 19L3 20L4 16L16.5 3.50001Z" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>    </svg>     </div>      <div class="web-form-item-clear">        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">          <path d="M18 6L6 18M6 6L18 18" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>        </svg>      </div>    </div>  </div>');  }); })

Ответы

▲ 0Принят
document.querySelector('.add').addEventListener('click', function() {
  document.querySelector('.personal-adress-inner').insertAdjacentHTML('beforeEnd', '<div class="web-form-item control"><textarea placeholder=" " ></textarea><div class="web-form-item-control"><div class="web-form-item-undis"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 20H21" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16.5 3.50001C16.8978 3.10219 17.4374 2.87869 18 2.87869C18.2786 2.87869 18.5544 2.93356 18.8118 3.04017C19.0692 3.14677 19.303 3.30303 19.5 3.50001C19.697 3.697 19.8532 3.93085 19.9598 4.18822C20.0665 4.44559 20.1213 4.72144 20.1213 5.00001C20.1213 5.27859 20.0665 5.55444 19.9598 5.81181C19.8532 6.06918 19.697 6.30303 19.5 6.50001L7 19L3 20L4 16L16.5 3.50001Z" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></div><div class="web-form-item-clear"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M18 6L6 18M6 6L18 18" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></div></div></div>');
});
▲ 0
document.querySelector(".add").addEventListener("click", () => {
  const personalAdressInner = document.querySelector(".personal-adress-inner");

  const div = document.createElement("div");
  div.classList.add("web-form-item", "control");

  const textarea = document.createElement("textarea");
  textarea.setAttribute("placeholder", " ");

  const itemControl = document.createElement("div");
  itemControl.classList.add("web-form-item-control");

  const itemUndis = document.createElement("div");
  itemUndis.classList.add("web-form-item-undis");

  const svgUndis = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svgUndis.setAttribute("width", "24");
  svgUndis.setAttribute("height", "24");
  svgUndis.setAttribute("viewBox", "0 0 24 24");
  svgUndis.setAttribute("fill", "none");

  const pathUndis1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
  pathUndis1.setAttribute("d", "M12 20H21");
  pathUndis1.setAttribute("stroke", "#999999");
  pathUndis1.setAttribute("stroke-width", "1.5");
  pathUndis1.setAttribute("stroke-linecap", "round");
  pathUndis1.setAttribute("stroke-linejoin", "round");

  const pathUndis2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
  pathUndis2.setAttribute("d", "M16.5 3.50001C16.8978 3.10219 17.4374 2.87869 18 2.87869C18.2786 2.87869 18.5544 2.93356 18.8118 3.04017C19.0692 3.14677 19.303 3.30303 19.5 3.50001C19.697 3.697 19.8532 3.93085 19.9598 4.18822C20.0665 4.44559 20.1213 4.72144 20.1213 5.00001C20.1213 5.27859 20.0665 5.55444 19.9598 5.81181C19.8532 6.06918 19.697 6.30303 19.5 6.50001L7 19L3 20L4 16L16.5 3.50001Z");
  pathUndis2.setAttribute("stroke", "#999999");
  pathUndis2.setAttribute("stroke-width", "1.5");
  pathUndis2.setAttribute("stroke-linecap", "round");
  pathUndis2.setAttribute("stroke-linejoin", "round");

  svgUndis.appendChild(pathUndis1);
  svgUndis.appendChild(pathUndis2);
  itemUndis.appendChild(svgUndis);

  const itemClear = document.createElement("div");
  itemClear.classList.add("web-form-item-clear");

  const svgClear = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svgClear.setAttribute("width", "24");
  svgClear.setAttribute("height", "24");
  svgClear.setAttribute("viewBox", "0 0 24 24");
  svgClear.setAttribute("fill", "none");

  const pathClear = document.createElementNS("http://www.w3.org/2000/svg", "path");
  pathClear.setAttribute("d", "M18 6L6 18M6 6L18 18");
  pathClear.setAttribute("stroke", "#999999");
  pathClear.setAttribute("stroke-width", "1.5");
  pathClear.setAttribute("stroke-linecap", "round");
  pathClear.setAttribute("stroke-linejoin", "round");

  svgClear.appendChild(pathClear);
  itemClear.appendChild(svgClear);

  itemControl.appendChild(itemUndis);
  itemControl.appendChild(itemClear);

  div.appendChild(textarea);
  div.appendChild(itemControl);

  personalAdressInner.appendChild(div);
});