Create An Element Using Javascript

Question

I have a html table Column Headers here...

Solution 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?

Solution 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>');

Solution 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;}

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

Solution 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.

Baca Juga

... 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.

Solution 5:

Try this:

$("#rpttable tbody tr").remove();
var content = '' ;
for (i = 0; i < data.length; i++) {
    content += "<tr>" ;

    for (x indata[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!

functionAppendNewRowToTable() {
  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) ;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ahref="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>

Html5 Guru