how can i reference an ID from js to html

Related searches
    <table style="width:100%" id="ex-table">
        <tr id="tr">
            <th>Age:</th>
            <th>first_name:</th>
            <th>last_name:</th>
            <th>notes:</th>
    </table>
var database = firebase.database().ref().child('users');
database.on('value', function (snapshot) {
    if (snapshot.exists()) {
        var content = '';
        snapshot.forEach(function (data) {
            var val = data.val();
            content += '<tr>';
            content += '<td>' + val.age + '</td>';
            content += '<td>' + val.first_name + '</td>';
            content += '<td>' + val.last_name + '</td>';
            content += '<td>' + val.notes + '</td>';
            content += '</tr>';
        });
        $("#ex-table").append('content'); //isnt working, 'Uncaught ReferenceError: $ is not defined'
    }
});

So Im trying to append the following table in my JS, and for some reason it isnt working. In the console im getting 'Uncaught ReferenceError: $ is not defined'. Anyone know why this is? Its probably something really simple but I just cant figure it out.

Try this

var table = document.getElementById("ex-table");
table.innerHTML += content;

jQuery #id Selector, The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id. The id property sets or returns the id of an element (the value of an element's id attribute). An ID should be unique within a page, and is often used to return the element using the document.getElementById () method.

$("#ex-table") is jQuery syntax, but you don't have this libary loaded. Use document.getElementById(). And then append to its innerHTML property.

document.getElementById("ex-table").innerHTML += content;

HTML Global id Attribute, The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id. The getElementById () method returns the element that has the ID attribute with the specified value. This method is one of the most common methods in the HTML DOM, and is used almost every time you want to manipulate, or get info from, an element on your document. Returns null if no elements with the specified ID exists.

Well, you can use jQuery like this:

$(function() {
   // bla bla bla

       $("#ex-table").append(content);
});

HTML id Attribute, And a very simple JS function is here : function myFunc(id){ alert(id); } You can see in JsFiddle. The problem is : I have no idea, maybe doesn't pass this.id to myFunc function, or some problem else. What's the problem ? Any help would be appreciated.

I just wanted to note, for anyone getting a null reference exception using JQuery's event.target.id (for me, both Firefox and IE were throwing it), this is a great solution that works in all three major browsers. – X3074861X Aug 8 '13 at 16:30

Below the line in which you embed the JavaScript code, you can reference, or call, that JavaScript code in response to an event handler or an HTML link. You have two choices when it comes to embedding JavaScript code in an HTML file: You can use the <SCRIPT> and </SCRIPT> tags to include JavaScript code directly into an HTML file.

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Comments
  • The $ symbol is usually for jQuery, so your page probably is not importing the library.
  • just replace the $("#ex-table") with document.getElementById("ex-table")
  • @TilmanB.akaNerdyyy well that won't entirely work; the subsequent .append() call would also have to be modified.
  • content shouldn't be in quotes./
  • You're missing </tr> in the initial table.
  • Thank you so much, this worked! Although now, when I add data to my database, the same data appears again with the newly added data, so its showing duplicates. How can I make it so it only shows what has been added.
  • just set the value of variable table to blank after adding data to database table.innerHTML = ' ';