Create an element using javascript

Question

I have a html table

<table id = "rpttable" name = "rpttable">
 <thead>
 Column Headers here...
 </thead>
 <tbody id = "rptbody" name = "rptbody">
 data here <3 ....
 </tbody>
</table>

and here is my php (sample.php)

<?php
 Query Code here..
 Query Code there..
 and so on
 //this is the way I populate a table
 while (query rows) {
 echo '<tr>';
 echo '<td>Sample Data</td>';
 echo '</tr>;
 }
?>

So to make this work and to populate the table this is what I do.

<table id = "rpttable" name = "rpttable">
 <thead>
 Column Headers here...
 </thead>
 <tbody id = "rptbody" name = "rptbody">
 <?php
 include 'folder_location/sample.php';
 ?>
 </tbody>
</table>

Disregard the image of the ouput but when I go to Inspect Element or even Ctrl + u I will see my table structure now is like this.

<table id = "rpttable" name = "rpttable">
 <thead>
 Column Headers here...
 </thead>
 <tbody id = "rptbody" name = "rptbody">
 <tr>
 <td>Sample Data</td>
 </tr>
 </tbody>
</table>

Now here is the thing. I do not do that this is what I do.

$("#rpttable tr").remove();
 for (i = 0; i < data.length; i++) {
 tr = $("<tr />");
 for (x in data[i]) {
 td = $("<td />");
 td.html(data[i][x]);
 tr.append(td);
 }
 rpttable.append(tr); 
 }

Same output It does populate the table but when I go to Inspect Element or even Ctrl + u the output is.

<table id = "rpttable" name = "rpttable">
 <thead>
 Column Headers here...
 </thead>
 <tbody id = "rptbody" name = "rptbody">
 **This is the part missing**
 </tbody>
</table>

My question here is how can I literaly create an element usung javascript/ajax? same output in php. I mean write the element.

** Updated ** I am trying to run a css class from an external file and If I manualy edit it to suits my needs I will a long hour and also Its hard for me to explain its a class for table. I tried to use that class using default value in <table>. You know manualy write it at the back end. now Im trying to populate it using a php and ajax so, so far so good it does populate but when I try to run the class the class does not work.

TYSM

• SPlatten: Little confused, are you asking how to document.createElement("div"); ? (w3schools.com/jsref/met_document_createelement.asp)
• Mario Rawady: You are appending thetr to rpttable using this: rpttable.append(tr);. Don't you have to append it to rptbody using this: rptbody.append(tr); ?
• Nardong Bagsik: Yes I am creating an element that I can see when I look in Ctrl + u
• Nardong Bagsik: @MarioA.Rawady if I do that and check it in Inspect Element will I see that elem?
• Mario Rawady: @paulpagente, I didn't regenerated the error yet. Try it, and if it does not work I will then try to regenerate the error! But mainly, if the element is showing on the browser, then it must be shown in the Inspect Element

Answer 1

Using jquery you can add html rows to the tbody using:

$("#rptbody").html("<tr><td>value</td></tr>");

Is this what you want to do?

• Nardong Bagsik: So If I do that. will i see the output embeded if i look in Inspect Element?
• Mario Rawady: For this solution, use $("#rptbody").append("<tr><td>value</td></tr>"); and not $("#rptbody").html("<tr><td>value</td></tr>");
• Mark Redman: Yes you should see the new html when inspecting the element. You could try it?
• Oluwafemi Sule: Note that you will need to remove $("#rpttable tr").remove(); in your original script
• Mark Redman: .html() should replace the html in the body tag, so no need to remove anything.

Answer 2

You can use JQuery append() method:

$('#rptbody').append('<tr><td>my data</td><td>more data</td></tr>');

In case you need to insert after last row:

$('#rptbody> tbody:last-child').append('<tr>...</tr><tr>...</tr>');

Answer 3

 for (i = 0; i < 5; i++) {
 let tr = $("<tr />");
 for (j=0; j < 5;j++)
 tr.append($("<td />",{html:j,class:"tbl"}));
 $("tbody").append(tr); 
}

.tbl{border:1px solid pink;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <tbody></tbody>
</table>

Answer 4

You have asked roughly two questions. Let's break it down.

My question here is how can I literaly create an element usung javascript/ajax?

You are already doing this with your Javascript (client-side) code. It looks like you're using jQuery syntax, so we'll stick with that. This does create an element and inserts it into the page.

var $el = $("<div>I'm a new div element</div>");
$('body').append( $el );

This creates a new element, assigns it to the $el variable, and then appends it to the body of the page. This will not show up in "View Page Source" view, however. Why? Because this modifies the DOM -- the Dynamic Object Model.

To see this new element, you'll either need to look at the rendered output (what the user/you sees), or open up your browser's DevTools (often <F12>, or right-click -> inspect). In the DevTools, find the "Inspector" tab (or equivalent), then look for your new element in this live view of the DOM.

Screenshot of Firefox Devtools' Inspector

... same output in php.

In short, you can't. What Ctrl+U / View Page Source shows is the page as it was initially received from the server. This would be the exact content you would see if you were to use a command line tool, like curl or wget:

curl http://url.to.your.com/page

Since you include 'folder_location/sample.php' at the server, this is included in the page before the browser sees it. For your edification, I would consider reading up on the DOM.

• Wikipedia
• W3

Answer 5

Try this:

$("#rpttable tbody tr").remove();
var content = '' ;
for (i = 0; i < data.length; i++) {
 content += "<tr>" ;
 for (x in data[i]) {
 content += "<td>" + data[i][x] + "</td>" ;
 }
 content += "</tr>" ;
}
$("#rpttable tbody").html(content) ;

Updated

I am using Google Chrome too. Please try the below code, and check the inspect element each time you add a new row. You can see the html in the Inspect Element changing!

function AppendNewRowToTable() {
 var trLen = $("table tbody tr").length ;
 var content = "" ;
 content += "<tr>" ;
 for (i = 0; i < 5; i++) {
 content += "<td>" + trLen + "-" + i + "</td>" ;
 }
 content += "</tr>" ;
 $("table tbody").append(content) ;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:;" onclick="AppendNewRowToTable()">Add new Row</a>
<br />
<table>
 <thead>
 <tr>
 <th>Title 01</th>
 <th>Title 02</th>
 <th>Title 03</th>
 <th>Title 04</th>
 <th>Title 05</th>
 </tr>
 </thead>
 <tbody></tbody>
</table>

• Nardong Bagsik: does not work. I checked it the table populates but the in inspect element nothing shows
• Mario Rawady: That is weird! Usually, any changes made to the page html using JavaScript are visible through Inspect Element. What browser are you using, and what version?
• Nardong Bagsik: sorry my bad. It shows in inspect element but in ctrl u it is not –
• Mario Rawady: Yes of course. Ctrl + U won't show it, since it will show you the main html of the file before any JavaScript is executed!
• Nardong Bagsik: thats what Im looking for is that possible?

Answer 6

It seems your intent is to append extra rows to the table in your html response generated from your PHP script.

For that you don't need to clear all existing rows.

(削除) $("#rpttable tr").remove(); (削除ここまで)

Build an array of rows and append once to your table body.

var $tbody = $('#rptbody');
var tableRowAdditions = [];
for (var i = 0; i < data.length; i++) {
 var $tr = $("<tr></tr>");
 for (var x in data[i]) {
 var $td = $("<td></td>");
 $td.html(data[i][x]);
 $tr.append(td);
 }
 tableRowAdditions.push(tr); 
}
$tbody.append(tableRowAdditions);

• Nardong Bagsik: populates the table but not in inspect element
• Oluwafemi Sule: Do you mean you're not seeing the data in your table?
• Nardong Bagsik: sorry my bad. It shows in inspect element but in ctrl u it is not
• Oluwafemi Sule: When you view source, you see original response from the server. We're updating the browser's DOM Tree not the source. This isn't something you can do in the browser.

Answer 7

For a "pure" JavaScript approach, you can create elements using the createElement Web API

For example: A paragraph with text "Hello" would be

var container = document.getElementById('rptbody');
var hello = document.createTextNode('Hello');
var helloParagraph = Document.createElement('p');
// Add text to paragraph
helloParagraph.appendChild(hello);
// Append to container
container.appendChild(helloParagraph);

Answer 8

The best way to create elements using jQuery is to use the following format:

// Create the TR and TD elements as jQuery objects.
var tr = $("<tr></tr>", {
 "id":"tr1",
 "class":"tr"
});
var td = $("<td></td>", {
 "id":"td1",
 "class":"td",
 "text": "Sample Data",
 click: function() {
 // optional: Function to attach a click event on the object
 alert("Clicked!");
 }
});
// Attach the element to the document by appending it 
// inside rptbody (after all existing content inside #rptbody) 
$("#rptbody").append(tr);
tr.append(td);
// OR, Attach the element to the document by prepending it
// inside rptbody (before all existing content in #rptbody) 
$("#rptbody").prepend(tr);
tr.append(td);
// OR, Attach the element to the document by completely replacing the content of #rptbody
$("#rptbody").html(tr);
tr.append(td);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id = "rpttable" name = "rpttable">
 <thead>
 Column Headers here...
 </thead>
 <tbody id = "rptbody" name = "rptbody">
 </tbody>
</table>

• beliha: I don't understand what you are trying to do. You are loading a css file externally, and what is the problem?
• Nardong Bagsik: The CSS does not work if I populated the data using JS. it only works if the data is part of the table. I mean if you press Ctrl U I cant see the data as part of the table
• beliha: That is not true. Any elements created using jQuery appear in the DOM normally, and any css files attached to it will apply to the document normally. I've been creating elements like this and styling them through css sheets for years. Your issue is possibly something else. Please post your full source code including the css file and how you load it into the HTML in order for us to investigate.