How to create dynamic fields using JavaScript, InnerHTML and Thymeleaf

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

How to create dynamic fields using JavaScript, InnerHTML and Thymeleaf

Minite11
I have this code where the user can create dynamic fields using the tech above. But it doesn't seem to work when I implement it using InnerHTML and JavaScript. Here's the code


Java Script Code
 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 Code




I've debugged it on chrome and it shows the innerHTML like this
<p th:text="${field.fieldName}" name="fieldname"></p>
<input type="${field.fieldType}" name="fieldtype" />

instead of like this
<p name="fieldname>SAMPLE FIELD NAME</p>
<input type="text" name="fieldtype" />