CODEWITHSUNDEEP
javascriptjqueryhtml
user3871
user3871

Reputation: 12708

spans not being appended to parent div

I have a very simple js issue but can't seem to figure it out. Why are my spans not being appended to the div? jQuery is being loaded just fine, the page isn't throwing any errors, and console.log is outputting the loop correctly.

JS:

var matrix = [];
createGrid();
function createGrid () {

    for(var i=0; i < 6; i++) {
        matrix[i] = [];
        for(var j=0; j < 6; j++) {
            log("["+i+"]["+j+"]");
            var $span = $('<span />');
            $("#myGrid").append($span);
        }
    }
}   

function log (w) {
        console.log(w);
}

HTML:

<body>
    <div id="myGrid"></div>
</body>

Output from console: You can see no children are being appended... Why is this?

 <div id="myGrid"></div>

EDIT: I did mention no console errors were thrown, so log() wasn't the issue, as I've defined it elsewhere. I was indeed operating on an empty set because the HTML wasn't yet loaded... I needed to have jquery on ready run.

Upvotes: 0

Views: 94

Answers (4)

Ruan Mendes
Ruan Mendes

Reputation: 92274

If you are seeing the log() calls (meaning you've defined it somewhere else), it's because you're running the JavaScript before the HTML is loaded, as you can see here http://jsfiddle.net/dqrm07b2/1/

Basically, the operations on $('#myGrid').append($span) is not doing anything because $('#myGrid') is returning an empty set.

I know some people love this silent error feature in jQuery, but I hate it. Trying to operate on an empty set should throw an error, it's hidden so many bugs for me.

Upvotes: 2

Frison Alexander
Frison Alexander

Reputation: 3256

You might be trying to query the DOM before its ready. Wrap all your code in a jQuery function to test if this is the case:

$(function(){

 //your code here

});

Edit: In response to "log is not a function", the question states that he is able to see output in console. From this I had assumed that console.log was aliased: function wrapper, library helper.. so on. Post says that it works and I'm running with it.

In the future the following techniques might be of help to you in debugging DOM problems:

1) Put an alert($("selector_you_want_to_test")[0]) This will pause the browser and you can inspect the state of the DOM tree construction in the developer tools window

2) Put in a debugger statement

3) For very large projects: Take a timeline profile (in google chome), the profile will show you when the DOM was finished and when your function ran. This view makes it very easy to reason about time sensitive problems like this.

Good Luck

Upvotes: 1

SaidbakR
SaidbakR

Reputation: 13534

Tryout a code like the following and make sure your code after the div or use document.ready():

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
        #myGrid {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: silver;
        }

        #myGrid > span {
           /* position: ;*/
            width : 20px;
            height: 20px;
            background-color: white;
        }


    </style>

</head>
<body>
 <div id="myGrid"></div>
  <script>
     var matrix = [];
            createGrid();
            function createGrid () {

                for(var i=0; i < 6; i++) {
                    matrix[i] = [];
                    for(var j=0; j < 6; j++) {
                       // console.log("["+i+"]["+j+"]");
                        var span = '<span>'+i+'</span>';
                        $("#myGrid").append(span);
                    }
                }
            }   
  </script>
</body>
</html>

Checkout this DEMO: http://jsbin.com/nezinixaza/1/

Upvotes: 1

indubitablee
indubitablee

Reputation: 8206

you had a "log" function or whatever i think you wanted to be "console.log"

your code otherwise does what its supposed to do, but i think this is what you actually want it to do: http://jsfiddle.net/swm53ran/27/

var matrix = [];
createGrid();
function createGrid () {

    for(var i=0; i < 6; i++) {
        matrix[i] = [];
        for(var j=0; j < 6; j++) {
            console.log("["+i+"]["+j+"]");
            var $span = "<span>["+i+"]["+j+"]</span><br/>";
            $("#myGrid").append($span);
        }
    }
}

Upvotes: 0

Related Questions