diff --git a/src/core/element/element.js b/src/core/element/element.js
new file mode 100644
index 000000000..3f22e8cb6
--- /dev/null
+++ b/src/core/element/element.js
@@ -0,0 +1,67 @@
+import { registFunction } from './plugins';
+
+export function Element(widget, attribs) {
+  this.l = this.r = this.t = this.b = 0; // 边框
+  this.marginLeft = this.marginRight = this.marginTop = this.marginBottom = 0; //间距
+  this.position = {};
+  this.classMap = {};
+  this.classList = [];
+  this.children = [];
+  this.attribs = attribs || {};
+  this.styles = {};
+  // 兼容处理
+  this['0'] = this;
+  this.style = {};
+  if (!widget) {
+    this.nodeName = 'body';
+    this.position.x = 0;
+    this.position.y = 0;
+    this.attribs.id = 'body';
+  } else if (BI.isWidget(widget)) {
+    this.widget = widget;
+    this.nodeName = widget.options.tagName;
+    this.textBaseLine = widget.options.textBaseLine;
+  } else if (BI.isString(widget)) {
+    this.nodeName = widget;
+  }
+}
+
+initElement(Element);
+registFunction(Element);
+
+function initElement(element) {
+  element.prototype = {
+    appendChild(child) {
+      child.parent = this;
+      if (this.children.push(child) !== 1) {
+        var sibling = this.children[this.children.length - 2];
+        sibling.next = child;
+        child.prev = sibling;
+        child.next = null;
+      }
+    },
+    append(child) {
+      child.parent = this;
+      if (this.children.push(child) !== 1) {
+        var sibling = this.children[this.children.length - 2];
+        sibling.next = child;
+        child.prev = sibling;
+        child.next = null;
+      }
+    },
+    getParent() {
+      return this.parent;
+    },
+    getSiblings() {
+      var parent = this.getParent();
+      return parent ? parent.getChildren() : [this];
+    },
+    getChildren() {
+      return this.children;
+    },
+
+    getBounds() {
+      return {};
+    },
+  };
+}
diff --git a/src/core/element/index.js b/src/core/element/index.js
new file mode 100644
index 000000000..708cdeaa9
--- /dev/null
+++ b/src/core/element/index.js
@@ -0,0 +1,27 @@
+import { Element } from './element';
+
+BI.Element = Element;
+BI.Element.renderEngine = {
+    createElement: (widget) => {
+        // eslint-disable-next-line no-undef
+        if (BI.isWidget(widget)) {
+            var o = widget.options;
+            if (o.element instanceof Element) {
+                return o.element;
+            }
+            if (typeof o.element === 'string' && o.element !== 'body') {
+                o.root = false;
+                return new Element(widget);
+            }
+
+            if (o.root === true) {
+                return new Element();
+            }
+        }
+        // eslint-disable-next-line no-undef
+        if (BI.isString(widget)) {
+            return new Element(widget);
+        }
+        return new Element(widget);
+    },
+}
diff --git a/src/core/element/plugins/attr.js b/src/core/element/plugins/attr.js
new file mode 100644
index 000000000..3ae918f29
--- /dev/null
+++ b/src/core/element/plugins/attr.js
@@ -0,0 +1,22 @@
+export const registAttrFun = (Element) => {
+  Element.registerFunction('attr', function (key, value) {
+    var self = this;
+    if (BI.isObject(key)) {
+      BI.each(key, (k, v) => {
+        self.attr(k, v);
+      });
+      return this;
+    }
+    if (BI.isNull(value)) {
+      return this.attribs[key];
+    }
+    this.attribs[key] = value;
+    return this;
+  });
+  Element.registerFunction('hasAttrib', function (key) {
+    return this.attribs[key] != null;
+  });
+  Element.registerFunction('removeAttr', function (key) {
+    delete this.attribs[key];
+  });
+};
diff --git a/src/core/element/plugins/class.js b/src/core/element/plugins/class.js
new file mode 100644
index 000000000..ce46e6864
--- /dev/null
+++ b/src/core/element/plugins/class.js
@@ -0,0 +1,23 @@
+export const registClassFun = (Element) => {
+  Element.registerFunction('addClass', function (classList) {
+    var self = this;
+    BI.each(classList.split(' '), (i, cls) => {
+      if (cls && !self.classMap[cls]) {
+        self.classList.push(cls);
+      }
+      cls && (self.classMap[cls] = true);
+    });
+    return this;
+  });
+
+  Element.registerFunction('removeClass', function (classList) {
+    var self = this;
+    BI.each(classList.split(' '), (i, cls) => {
+      if (cls && self.classMap[cls]) {
+        delete self.classMap[cls];
+        self.classList.splice(self.classList.indexOf(cls), 1);
+      }
+    });
+    return this;
+  });
+};
diff --git a/src/core/element/plugins/css.js b/src/core/element/plugins/css.js
new file mode 100644
index 000000000..e1826a155
--- /dev/null
+++ b/src/core/element/plugins/css.js
@@ -0,0 +1,22 @@
+export const registCssFun = (Element) => {
+  Element.registerFunction('css', function (key, value) {
+    var self = this;
+    if (BI.isObject(key)) {
+      BI.each(key, (k, v) => {
+        self.css(k, v);
+      });
+      return this;
+    }
+    key = BI.trim(BI.camelize(key));
+    return css(this, key, value);
+  });
+};
+
+const css = (elem, key, value) => {
+  key = BI.trim(BI.camelize(key));
+  if (BI.isNull(value)) {
+    return elem.styles[key];
+  }
+  elem.styles[key] = value;
+  return elem;
+};
diff --git a/src/core/element/plugins/data.js b/src/core/element/plugins/data.js
new file mode 100644
index 000000000..e141c96c3
--- /dev/null
+++ b/src/core/element/plugins/data.js
@@ -0,0 +1,12 @@
+export const registDataFun = (Element) => {
+  Element.registerFunction('data', function (key, value) {
+    if (!this._data) {
+      this._data = {};
+    }
+    if (BI.isNull(value)) {
+      return this._data[key];
+    }
+    this._data[key] = value;
+    return this;
+  });
+};
diff --git a/src/core/element/plugins/empty.js b/src/core/element/plugins/empty.js
new file mode 100644
index 000000000..dbe5e0c1d
--- /dev/null
+++ b/src/core/element/plugins/empty.js
@@ -0,0 +1,9 @@
+export const registEmptyFun = (Element) => {
+  Element.registerFunction('empty', function (text) {
+    this.children = [];
+    return this;
+  });
+  Element.registerFunction('destroy', function (text) {
+    return this;
+  });
+};
diff --git a/src/core/element/plugins/event.js b/src/core/element/plugins/event.js
new file mode 100644
index 000000000..38004ed88
--- /dev/null
+++ b/src/core/element/plugins/event.js
@@ -0,0 +1,32 @@
+var returnThis = function () {
+  return this;
+};
+export const registEventFun = (Element) => {
+  [
+    'mousedown',
+    'mouseup',
+    'mousewheel',
+    'keydown',
+    'keyup',
+    'focus',
+    'focusin',
+    'focusout',
+    'click',
+    'on',
+    'off',
+    'bind',
+    'unbind',
+    'trigger',
+    'hover',
+    'scroll',
+    'scrollLeft',
+    'scrollTop',
+    'resize',
+    'show',
+    'hide',
+    'dblclick',
+    'blur',
+  ].forEach((event) => {
+    Element.registerFunction(event, returnThis);
+  });
+};
diff --git a/src/core/element/plugins/html.js b/src/core/element/plugins/html.js
new file mode 100644
index 000000000..b115f9388
--- /dev/null
+++ b/src/core/element/plugins/html.js
@@ -0,0 +1,15 @@
+export const registHtmlFun = (Element) => {
+  Element.registerFunction('html', function (text) {
+    if (text && text.charAt(0) === '<') {
+      BI.createWidget({
+        type: 'bi.html',
+        element: this.widget,
+        html: text,
+      });
+      this.originalHtml = text;
+    } else {
+      this.text = BI.htmlDecode(text);
+    }
+    return this;
+  });
+};
diff --git a/src/core/element/plugins/index.js b/src/core/element/plugins/index.js
new file mode 100644
index 000000000..c32aab4dc
--- /dev/null
+++ b/src/core/element/plugins/index.js
@@ -0,0 +1,31 @@
+import { registAttrFun } from './attr';
+import { registClassFun } from './class';
+import { registCssFun } from './css';
+import { registDataFun } from './data';
+import { registEmptyFun } from './empty';
+import { registEventFun } from './event';
+import { registHtmlFun } from './html';
+import { registKeywordMarkFun } from './keywordMark';
+import { registRenderToHtmlFun } from './renderToHtml';
+import { registRenderToStringFun } from './renderToString';
+import { registTextFun } from './text';
+import { registValFun } from './val';
+
+export const registFunction = (Element) => {
+  var functionMap = {};
+  Element.registerFunction = (key, fn) => {
+    Element.prototype[key] = functionMap[key] = fn;
+  };
+  registAttrFun(Element);
+  registClassFun(Element);
+  registCssFun(Element);
+  registDataFun(Element);
+  registEmptyFun(Element);
+  registEventFun(Element);
+  registHtmlFun(Element);
+  registKeywordMarkFun(Element);
+  registRenderToStringFun(Element);
+  registRenderToHtmlFun(Element);
+  registTextFun(Element);
+  registValFun(Element);
+};
diff --git a/src/core/element/plugins/keywordMark.js b/src/core/element/plugins/keywordMark.js
new file mode 100644
index 000000000..a7eab83dd
--- /dev/null
+++ b/src/core/element/plugins/keywordMark.js
@@ -0,0 +1,6 @@
+export const registKeywordMarkFun = (Element) => {
+  Element.registerFunction('__textKeywordMarked__', function (text) {
+    this[0].textContent = text;
+    return this;
+  });
+};
diff --git a/src/core/element/plugins/renderToHtml.js b/src/core/element/plugins/renderToHtml.js
new file mode 100644
index 000000000..525afe062
--- /dev/null
+++ b/src/core/element/plugins/renderToHtml.js
@@ -0,0 +1,65 @@
+var skipArray = [];
+var pxStyle = ['font-size', 'width', 'height'];
+var _renderToHtml = function (root) {
+  var str = '';
+  if (BI.isNull(root.originalHtml)) {
+    if (root.tag !== 'body') {
+      str += `<${root.tag}`;
+      if (root.classList.length > 0) {
+        str += ' class="';
+        BI.each(root.classList, (i, cls) => {
+          str += ` ${cls}`;
+        });
+        str += '"';
+      }
+      str += ' style="';
+      BI.each(root.originalStyles, (key, stl) => {
+        if (
+          skipArray.contains(key) ||
+          (key == 'height' && root.classList.contains('bi-design-components-data-data-table-cell'))
+        ) {
+          return;
+        }
+        key = BI.hyphenate(key);
+        if (key === 'font-family') {
+          stl = stl.replace(/\"/g, '');
+        }
+        if (pxStyle.contains(key) && BI.isNumeric(stl)) {
+          stl += 'px';
+        }
+        if (BI.isKey(stl)) {
+          str += ` ${key}:${stl};`;
+        }
+      });
+      str += '"';
+      BI.each(root.attribs, (key, attr) => {
+        if (BI.isKey(attr)) {
+          str += ` ${key}=${attr}`;
+        }
+      });
+      if (root.textContent) {
+        str += ` title=${root.textContent}`;
+      }
+      str += '>';
+    }
+    // 特殊处理，spread_table的行列元素是不取配置里的高度的，使用stretch拉伸的（leaves取了高度），但是功能代码里给单元格默认高度了，导致拉伸不了
+    //  而spread_grid_table的行列元素是取配置里的高度的，拉不拉伸都一样
+    BI.each(root.children, (i, child) => {
+      str += _renderToHtml(child);
+    });
+  } else {
+    str += root.originalHtml;
+  }
+  if (root.tag !== 'body') {
+    if (root.textContent) {
+      str += root.textContent;
+    }
+    str += `</${root.tag}>`;
+  }
+  return str;
+};
+export const registRenderToHtmlFun = (Element) => {
+  Element.registerFunction('renderToHtml', function () {
+    return _renderToHtml(this);
+  });
+};
diff --git a/src/core/element/plugins/renderToString.js b/src/core/element/plugins/renderToString.js
new file mode 100644
index 000000000..f0073f258
--- /dev/null
+++ b/src/core/element/plugins/renderToString.js
@@ -0,0 +1,50 @@
+var skipArray = ['width', 'height'];
+var _renderToString = function (root) {
+  var str = '';
+  if (root.nodeName !== 'body') {
+    str += `<${root.nodeName}`;
+    if (root.classList.length > 0) {
+      str += ' class="';
+      BI.each(root.classList, (i, cls) => {
+        str += ` ${cls}`;
+      });
+      str += '"';
+    }
+    str += ' style="';
+    BI.each(root.styles, (key, stl) => {
+      if (skipArray.includes(key)) {
+        return;
+      }
+      key = BI.hyphenate(key);
+      str += ` ${key}:${stl};`;
+    });
+    str += ` width:${root.width}px;`;
+    str += ` height:${root.height}px;`;
+    str += ' position: fixed;';
+    str += ` left: ${root.position.x}px;`;
+    str += ` top: ${root.position.y}px;`;
+    str += '"';
+    BI.each(root.attribs, (key, attr) => {
+      str += ` ${key}:${attr}`;
+    });
+    str += '>';
+  }
+  BI.each(root.children, (i, child) => {
+    str += _renderToString(child);
+  });
+  // if (root.htmlContent) {
+  //     str += root.htmlContent;
+  // }
+  if (root.nodeName !== 'body') {
+    if (root.text) {
+      str += root.text;
+    }
+    str += `</${root.nodeName}>`;
+  }
+  return str;
+};
+export const registRenderToStringFun = (Element) => {
+  Element.registerFunction('renderToString', function () {
+    return _renderToString(this);
+  });
+};
diff --git a/src/core/element/plugins/text.js b/src/core/element/plugins/text.js
new file mode 100644
index 000000000..555195251
--- /dev/null
+++ b/src/core/element/plugins/text.js
@@ -0,0 +1,10 @@
+export const registTextFun = (Element) => {
+  Element.registerFunction('setText', function (text) {
+    this.text = text;
+    return this;
+  });
+  Element.registerFunction('setValue', function (text) {
+    this.text = text;
+    return this;
+  });
+};
diff --git a/src/core/element/plugins/val.js b/src/core/element/plugins/val.js
new file mode 100644
index 000000000..f4b868918
--- /dev/null
+++ b/src/core/element/plugins/val.js
@@ -0,0 +1,9 @@
+export const registValFun = (Element) => {
+  Element.registerFunction('val', function (value) {
+    if (BI.isNotNull(value)) {
+      this.text = `${value}`;
+      return this;
+    }
+    return this.text;
+  });
+};
diff --git a/src/widget/multiselect/loader.js b/src/widget/multiselect/loader.js
index f6b6bd3de..87b1761c4 100644
--- a/src/widget/multiselect/loader.js
+++ b/src/widget/multiselect/loader.js
@@ -87,6 +87,8 @@ BI.MultiSelectInnerLoader = BI.inherit(BI.Widget, {
             }
         });
 
+        var renderEngine = BI.Widget._renderEngine;
+        BI.Widget.registerRenderEngine(BI.Element.renderEngine);
         this.cachGroup = BI.createWidget(o.el, {
             type: "bi.button_group",
             root: true,
@@ -98,6 +100,7 @@ BI.MultiSelectInnerLoader = BI.inherit(BI.Widget, {
             }],
             value: o.value
         });
+        BI.Widget.registerRenderEngine(renderEngine);
 
         if (o.next !== false) {
             this.next = BI.createWidget(BI.extend({