如何在按钮上添加HTML并将对象或其字段绑定到该HTML的html？

Question

这是一个简单的Java类，例如：html带有胸腺的html列表

public class Apple {
    private List<String> listOfStrings;
    // getters setters
}

：

<form method="post" th:object="${apple}"> // apple is set through Model.addAttribute(.., ..) in Controller
    <input type="text" th:each="str, iter : *{listOfStrings} th:field="*{listOfStrings[__${iter.index}__]}">
    <button id="add" type="button" onclick="add()>Add</button>
    <button id="remove" type="button" onclick="remove()">Remove</button>
    <input type="submit" value="Save">
<form>

javascript添加和删除新输入：

const newInputTextString="<input type=\"text\" th:field="?">" // th:field won't be evaluated/bound to apples listOfStrings index

function add() {
    const xhttp = new XMLHttpRequest();
    xhttp.onload = function() {
        document.getElementById("add").insertAdjacentHTML("beforebegin", newInputTextString);
    }
    xhttp.open("GET", window.location.href);
    xhttp.send();
}

function remove() {
    // TODO
}

到目前为止，我只通过JavaScript添加HTML，但是我不能在其中包含TH：因为这些标签不会评估这些标签并绑定到特定对象或字段。

预期功能：

• 单击“删除”按钮，删除了与ListOfstrings特定索引的类型文本的最后输入。
• 单击“添加”按钮，添加了类型文本的新输入并将其绑定到ListOfstrings的下一个索引。

换句话说，我想让用户能够使用HTML按钮在该Apple对象的ListOfstrings中删除并添加字符串。

随意纠正我的英语

Answer 1

TH：字段本质上只是在元素上为您提供一个ID和名称属性。您不能通过JS添加一个字段，但是可以通过手动添加适当的ID和名称属性来模仿其行为。话虽如此，您应该对HTML和JS代码进行一些修改。

您应该始终拥有当前字符串总数的记录，因此您可以调整字符串索引。为此，我围绕所有字符串输入创建了一个DIV包装器，因此我们可以在JS中访问它。之后，我们只是阅读其中的元素数量，并从中创建一个新的索引。

您可以查看以下实现：

function createInput(index) {
  var input = document.createElement('input');
  input.setAttribute('type', 'text');
  input.setAttribute('id', `listOfStrings[${index}]`);
  input.setAttribute('name', `listOfStrings[${index}]`);
  input.setAttribute('placeholder', `listOfStrings[${index}]`);
  input.setAttribute('data-index', index);
  input.setAttribute('data-input', '');
  return input;
}

function addString() {
  var inputsWrapper = document.querySelector('[data-inputs]');
  var inputs = inputsWrapper.querySelectorAll('[data-input]');
  var newIndex = inputs.length;
  var newInput = createInput(newIndex);
  inputsWrapper.append(newInput);
}

<form method="post" th:object="${apple}">
  <div style="display: flex; flex-direction: column; max-width: 300px" data-inputs>
    <input 
       type="text"
       placeholder="listOfStrings[0]"
       th:placeholder="${'listOfStrings[__${iter.index}__]'}"
       th:each="str, iter : *{listOfStrings}"
       th:attr="data-index=${__${iter.index}__}" 
       th:field="*{listOfStrings[__${iter.index}__]}"
       data-input />
  </div>
  <button id="add" type="button" onclick="addString()">Add</button>
  <button id="remove" type="button" onclick="remove()">Remove</button>
  <input type="submit" value="Save">
<form>