How can view jquery appended data using browsers view page source option?

Iam appending some data to a table in my php page. Data is shown in web page. That's ok. Then I opened the view page source in my web browser. But I didn't see that data in page source. Is there any method to show that data in page source? This is my code

for (var i in Newdata) {
    $('.dataTables_empty').hide();
    var str = "<tr id='row" + Newdata[i].VehicleTypeID + "'>" +
              "<td><p id='" + Newdata[i].VehicleTypeID + "'>" + Newdata[i].VehicleTypeName + "</p></td>" +
              "<td><a href='#' class='datatable' id='edit' valuefield='" + Newdata[i].VehicleTypeID + "' action='edit' fieldname='VehicleTypeName' modal-name='Type-Modal'><button class='icon-edit'>Edit</button></a></td>" +
              "<td><a href='#' class='datatable' id='delete' valuefield='" + Newdata[i].VehicleTypeID + "' action='delete'><button class='icon-delete'>Delete</button></a></td>" +
             "</tr>";
   var $row = $(str).appendTo("#BrandTypeTable tbody");
  }

View Page Source shows the code as it appears in the HTML source file¹. You can use the page inspector in the developer tools (accessible via F12 in most browsers) to see the "live" DOM tree.

If you need to access the current page HTML within your Javascript code, you can use document.body.innerHTML or similar.

^{1: More accurately, it shows "what was initially received from the server", since the HTML may have been generated by PHP, Rails, or similar.}