javascript - How to rewrite HTML to HTML with JS?

Question

This html code I had before application switching to REST/AJAX :

<div class="container">
<h2 align="center">TEACHERS</h2>
<table class="table table-dark" border="1" width="100%" cellpadding="5">
    <thead>
    <tr>
        <th> ID</th>
        <th> Name</th>
        <th> Position</th>

    </tr>
    </thead>
    <tbody>
    <tr th:if="${teachers.empty}">
        <td colspan="2"> No teachers Available</td>
    </tr>
    <tr th:each="teacher : ${teachers}">
        <td><a th:href="@{/teacherViews/teacherDescription(teacherId=${teacher.teacherId})}"><span
                th:text="${teacher.teacherId}"></span></a></td>
        <td><span th:text="${teacher.teacherName}"></span></td>
        <td><span th:text="${teacher.position}"></span></td>
    </tr>
    </tbody>
</table>

So, here I have table Teachers and when I click on teacherId - 1,2 or 10 I throw on the page teacherViews/teacherDescription with teacherId on which I click.

So, I need to do the same but now I use REST / AJAX.

Now I have html :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="/teachers.js"></script>
<table id="table-content" class="table table-dark" border="1" width="100%" cellpadding="5">
<tr>
    <th>Teacher ID</th>
    <th>Teacher Name</th>
    <th>Teacher Position</th>
</tr>

teachers.js :

var service = 'http://localhost:8081/';
$(document).ready(function(){

 jQuery.support.cors = true;

$.ajax(
    {
        type: "GET",
        url: service + 'check/',
         // data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        cache: false,
        success: function (data) {
  var trHTML = '';

            $.each(data, function (i, teacher) {


                trHTML += '<tr><td>' + teacher.teacherId + '</td><td>' + teacher.teacherName + '</td><td>' + teacher.position + '</td></tr>';
            });

            $('#table-content').append(trHTML);
        },
  error: function (msg) {

            alert(msg.responseText);
        }
    });
})

This code works fine and table shows on the page.

As far as I understand, I need to rewrite this line trHTML += '<tr><td>' + teacher.teacherId + '</td><td>' + teacher.teacherName + '</td><td>' + teacher.position + '</td></tr>'; }); in teachers.js.

question from:https://stackoverflow.com/questions/65842271/how-to-rewrite-html-to-html-with-js

Answer 1

Waitting for answers