update

src/index.js

@@ -78,9 +78,13 @@ class Artplayer extends Emitter {
   init() {
     this.focus = false;
     this.playing = false;
-    this.refs = {
-      $container: this.option.container
-    };
+    this.refs = {};
+
+    if (this.option.container instanceof Element) {
+      this.refs.$container = this.option.container;
+    } else {
+      this.refs.$container = document.querySelector(this.option.container);
+    }
 
     this.template = new Template(this);
     this.i18n = new I18n(this);

src/layers.js

@@ -20,17 +20,24 @@ export default class Layers {
     const { refs } = this.art;
     id++;
 
-    refs.$layers.insertAdjacentHTML('beforeend', `
-      <div
-        data-art-layer-id="${id}"
-        class="art-layer art-layer-${option.name || id}"
-        style="z-index: ${option.index || id}"
-      >
-        ${option.html || ''}
-      </div>
-    `);
+    const $layer = document.createElement('div');
+    $layer.setAttribute('data-art-layer-id', id);
+    $layer.setAttribute('class', `art-layer art-layer-${option.name || id}`);
+    $layer.style.zIndex = option.index || id;
 
-    const $layer = refs.$layers.querySelector(`[data-art-layer-id="${id}"]`);
+    if (option.html instanceof Element) {
+      $layer.appendChild(option.html);
+    } else {
+      $layer.innerHTML = option.html;
+    }
+
+    if (option.style) {
+      Object.keys(option.style).forEach(key => {
+        $layer.style[key] = option.style[key];
+      });
+    }
+
+    refs.$layers.appendChild($layer);
     callback && callback($layer);
   }
 

src/utils/verification.js

@@ -12,8 +12,8 @@ export default function verification(option) {
   );
 
   errorHandle(
-    option.container instanceof Element,
-    `'container' option require 'Element' type, but got '${typeof option.container}'.`
+    typeof option.container === 'string' || option.container instanceof Element,
+    `'container' option require 'string' or 'Element' type, but got '${typeof option.container}'.`
   );
 
   errorHandle(