diff --git a/src/_h5ai/client/js/inc/view/notification.js b/src/_h5ai/client/js/inc/view/notification.js
index a3e44ec9..afd53a42 100644
--- a/src/_h5ai/client/js/inc/view/notification.js
+++ b/src/_h5ai/client/js/inc/view/notification.js
@@ -1,19 +1,21 @@
-modulejs.define('view/notification', ['$'], function ($) {
+modulejs.define('view/notification', ['$', 'view/root'], function ($, root) {
 
     var template = '<div id="notification"/>';
+    var $el = $(template);
 
     function set(content) {
 
         if (content) {
-            $('#notification').stop(true, true).html(content).fadeIn(400);
+            $el.stop(true, true).html(content).fadeIn(400);
         } else {
-            $('#notification').stop(true, true).fadeOut(400);
+            $el.stop(true, true).fadeOut(400);
         }
     }
 
-    $(template).hide().appendTo('body');
+    $el.hide().appendTo(root.$el);
 
     return {
+        $el: $el,
         set: set
     };
 });
diff --git a/test/tests/unit/view/notification.js b/test/tests/unit/view/notification.js
index bc7ee417..7a07c88d 100644
--- a/test/tests/unit/view/notification.js
+++ b/test/tests/unit/view/notification.js
@@ -2,7 +2,7 @@
 'use strict';
 
 var ID = 'view/notification';
-var DEPS = ['$'];
+var DEPS = ['$', 'view/root'];
 
 describe('module \'' + ID + '\'', function () {
 
@@ -10,9 +10,10 @@ describe('module \'' + ID + '\'', function () {
 
         this.definition = modulejs._private.definitions[ID];
 
+        this.xRoot = {$el: null};
         this.applyFn = function () {
 
-            return this.definition.fn($);
+            return this.definition.fn($, this.xRoot);
         };
     });
 
@@ -24,6 +25,7 @@ describe('module \'' + ID + '\'', function () {
     beforeEach(function () {
 
         util.restoreHtml();
+        this.xRoot.$el = $('<div id="root"/>').appendTo('body');
     });
 
     describe('definition', function () {
@@ -61,22 +63,34 @@ describe('module \'' + ID + '\'', function () {
 
     describe('application', function () {
 
-        it('returns plain object with 1 property', function () {
+        it('returns plain object with 2 properties', function () {
 
             var instance = this.applyFn();
             assert.isPlainObject(instance);
-            assert.lengthOfKeys(instance, 1);
+            assert.lengthOfKeys(instance, 2);
         });
 
-        it('adds HTML', function () {
+        it('adds HTML #notification to #root (hidden)', function () {
 
             this.applyFn();
-            assert.lengthOf($('#notification'), 1);
+            assert.lengthOf($('#root > #notification'), 1);
             assert.lengthOf($('#notification:visible'), 0);
             assert.strictEqual($('#notification').text(), '');
         });
     });
 
+    describe('.$el', function () {
+
+        it('is $(\'#notification\')', function () {
+
+            var instance = this.applyFn();
+            assert.isObject(instance.$el);
+            assert.lengthOf(instance.$el, 1);
+            assert.isString(instance.$el.jquery);
+            assert.strictEqual(instance.$el.attr('id'), 'notification');
+        });
+    });
+
     describe('.set()', function () {
 
         it('is function', function () {