diff --git a/erizo_controller/erizoClient/src/views/Bar.js b/erizo_controller/erizoClient/src/views/Bar.js
index 649f46a4d9..0511649406 100644
--- a/erizo_controller/erizoClient/src/views/Bar.js
+++ b/erizo_controller/erizoClient/src/views/Bar.js
@@ -69,7 +69,12 @@ const Bar = (spec) => {
     waiting = setTimeout(show, 1000);
   };
 
-  document.getElementById(that.elementID).appendChild(that.div);
+  // Check for a passed DOM node.
+  if (typeof that.elementID === 'object' && typeof that.elementID.appendChild === 'function') {
+    that.elementID.appendChild(that.div);
+  } else {
+    document.getElementById(that.elementID).appendChild(that.div);
+  }
   that.div.appendChild(that.bar);
   that.bar.appendChild(that.link);
   that.link.appendChild(that.logo);
diff --git a/erizo_controller/erizoClient/src/views/Speaker.js b/erizo_controller/erizoClient/src/views/Speaker.js
index 70f68d65ad..d200b33832 100644
--- a/erizo_controller/erizoClient/src/views/Speaker.js
+++ b/erizo_controller/erizoClient/src/views/Speaker.js
@@ -115,7 +115,13 @@ const Speaker = (spec) => {
     show('none');
   }
 
-  document.getElementById(that.elementID).appendChild(that.div);
+  // Check for a passed DOM node.
+  if (typeof that.elementID === 'object' && typeof that.elementID.appendChild === 'function') {
+    that.elementID.appendChild(that.div);
+  } else {
+    document.getElementById(that.elementID).appendChild(that.div);
+  }
+  
   return that;
 };