diff --git a/packages/core/examples/test/api.html b/packages/core/examples/test/api.html
index 393f5ca..5861f17 100644
--- a/packages/core/examples/test/api.html
+++ b/packages/core/examples/test/api.html
@@ -91,6 +91,12 @@
       <div class="box" id="idraw-api-clearOperation">
         <div class="title">idraw.clearOperation</div>
       </div>
+      <div class="box" id="idraw-api-insertElementBefore">
+        <div class="title">idraw.insertElementBefore</div>
+      </div>
+      <div class="box" id="idraw-api-insertElementAfter">
+        <div class="title">idraw.insertElementAfter</div>
+      </div>
     </div>
 
     <script src="./../../dist/index.global.js"></script>
@@ -530,6 +536,44 @@
       })();
     </script>
 
+    <script type="module">
+      // idraw-api-insertElementBefore
+      import { getData } from './data.js';
+      import event from './../../../../scripts/browser/event.js';
+      (function() {
+        const mount = document.querySelector('#idraw-api-insertElementBefore');
+        const data = getData();
+        const core = new Core(mount, opts, config);
+        core.setData(data);
+        
+        const _data = core.getData();
+        const elem = _data.elements[0];
+        elem.x += 20;
+        elem.y += 20;
+        core.insertElementBefore(elem, _data.elements[1].uuid);
+        core.clearOperation();
+      })();
+    </script>
+ 
+
+    <script type="module">
+      // idraw-api-insertElementAfter
+      import { getData } from './data.js';
+      import event from './../../../../scripts/browser/event.js';
+      (function() {
+        const mount = document.querySelector('#idraw-api-insertElementAfter');
+        const data = getData();
+        const core = new Core(mount, opts, config);
+        core.setData(data);
+        
+        const _data = core.getData();
+        const elem = _data.elements[0];
+        elem.x += 20;
+        elem.y += 20;
+        core.insertElementAfter(elem, _data.elements[1].uuid);
+      })();
+    </script>
+
 
   </body>
 </html>
\ No newline at end of file
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 0e70841..d9234a2 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -235,6 +235,40 @@ class Core {
     }
   }
 
+  insertElementBefore(elem: TypeElementBase<keyof TypeElemDesc>, beforeUUID: string) {
+    const index = this[_helper].getElementIndexByUUID(beforeUUID);
+    if (index !== null) {
+      this.insertElementBeforeIndex(elem, index);
+    }
+  }
+
+  insertElementBeforeIndex(elem: TypeElementBase<keyof TypeElemDesc>, index: number) {
+    const _elem = deepClone(elem);
+    _elem.uuid = createUUID();
+    if (index >= 0) {
+      this[_data].elements.splice(index, 0, _elem);
+      this[_emitChangeData]();
+      this[_draw]();
+    }
+  }
+
+  insertElementAfter(elem: TypeElementBase<keyof TypeElemDesc>, beforeUUID: string) {
+    const index = this[_helper].getElementIndexByUUID(beforeUUID);
+    if (index !== null) {
+      this.insertElementAfterIndex(elem, index);
+    }
+  }
+
+  insertElementAfterIndex(elem: TypeElementBase<keyof TypeElemDesc>, index: number) {
+    const _elem = deepClone(elem);
+    _elem.uuid = createUUID();
+    if (index >= 0) {
+      this[_data].elements.splice(index + 1, 0, _elem);
+      this[_emitChangeData]();
+      this[_draw]();
+    }
+  }
+
   clearOperation() {
     this[_tempData].clear();
     this[_draw]();