Как создать динамические c поля, используя JavaScript, Inner HTML и Thymeleaf

Question

У меня есть этот код, где пользователь может создавать динамические c поля, используя технологию выше. Но, кажется, он не работает, когда я реализую его, используя Inner HTML и JavaScript. Вот код

Java Код сценария:

function ShowDynamicField(){

let table = document.getElementById('dynamic-field');
let row = table.insertRow(1);

let fieldname = row.insertCell(0);
fieldname.className = 'dynamicset';
let fieldtype = row.insertCell(1);
fieldtype.className = 'dynamicset';

fieldname.innerHTML = `<p th:text=`+'${field.fieldName}'+` name='fieldname'/>`
fieldtype.innerHTML = `<input type=`+'${field.fieldType}'+` name='fieldtype' />`
}

HTML КОД

    <div id="overflow" class="">
        <table id="dynamic-field">
            <thead>
                <tr>
                    <th> Field Name </th>
                    <th> Input Field </th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="field, status : ${dynamicField}">
                    <td class='dynamicset'>
                    </td>
                    <td class='dynamicset'>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

Я отладил его на chrome, и он показывает внутренний HTML как этот

<p th:text="${field.fieldName}" name="fieldname"></p>
<input type="${field.fieldType}" name="fieldtype" />

вместо этого

<p name="fieldname>SAMPLE FIELD NAME</p>
<input type="text" name="fieldtype" />

Answer 1

Использование переменных Thymeleaf внутри JavaScript кода некорректно. Пожалуйста, обратитесь к официальной документации на скрипт для встраивания для JS. Ниже приведен простой пример использования переменной Thymeleaf внутри JS кода ...

<script th:inline="javascript">
...
var username = [[${session.user.name}]];
...
</script>