jQuery cannot change the DOM with meteor.js?

Question

I'm using Meteor.js for a website I'm working on. I can't seem to use javascript (or jQuery) to manipulate the DOM at all.

The code below does not change the #testDiv HTML, and there is nothing in the alert box.

Tracker.autorun(function(){
        $("#testDiv").text("test");
        alert($("#testDiv").text());
});

My HTML is very basic:

    <div id="testDiv">
         this is a test
    </div>

Does anybody know whats going on? Is this a problem with my jQuery, or Meteor.js? Or am I just overlooking something simple?

Answer 1

An autorun only executes when its reactive variables change. The best way to directly manipulate the DOM in meteor is in an onRendered callback. For example:

Template.myTemplate.onRendered(function() {
  $("#testDiv").text("test");
  alert($("#testDiv").text());
});