javascript - 将以下jQuery代码转换为纯Javascript

Question

如何将以下注释行转换为纯JS？

$(document).ready(function() {
$("#add").click(function() {
        var lastField = $("#buildyourform div:last");
    var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
    var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
    fieldWrapper.data("idx", intId);
    var fName = $("<input type=\"text\" class=\"fieldname\" />");
    var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
    var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
    removeButton.click(function() {
        $(this).parent().remove();
    });
    fieldWrapper.append(fName);
    fieldWrapper.append(fType);
    fieldWrapper.append(removeButton);
    $("#buildyourform").append(fieldWrapper);
});

fiddle link

Answer 1

将jquery代码转换为js非常简单。除了这种情况，因为我真的没有地方可以测试它是否正常工作。

这是一个粗略的翻译，很有可能不起作用。请尽力解决这些错误。

document.addEventListener("DOMContentLoaded", function(event) {
  $.querySelector("#add").addEventListener("click", () => {
    var lastField = document.querySelector("#buildyourform").lastElementChild;
    var intId =
      (lastField && lastField.length && lastField.data("idx") + 1) || 1;
    var fieldWrapper = createElementFromHTML(
      '<div class="fieldwrapper" id="field' + intId + '"/>'
    );
    fieldWrapper.data("idx", intId);
    var fName = createElementFromHTML(
      '<input type="text" class="fieldname" />'
    );
    var fType = createElementFromHTML(
      '<select class="fieldtype"><option value="checkbox">Checked</option><option value="textbox">Text</option><option value="textarea">Paragraph</option></select>'
    );
    var removeButton = createElementFromHTML(
      '<input type="button" class="remove" value="-" />'
    );
    removeButton.onclick(e => {
      e.parentNode.removeChild(e.parentNode.parentNode); // You might have to play around with this one specifically
    });
    fieldWrapper.appendChild(fName);
    fieldWrapper.appendChild(fType);
    fieldWrapper.appendChild(removeButton);
    document.querySelector("#buildyourform").appendChild(fieldWrapper);
  });
});

function createElementFromHTML(htmlString) {
  var div = document.createElement("div");
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes
  return div.firstChild;
}