aligned "Neu" button with datatables search field

the_works/templates/views/text.html

@@ -2,7 +2,8 @@
 
 {% block title %}Texte{% endblock title %}
 
-{% block script %}<script>
+{% block script %}
+<script>
   const SCRIPT_ROOT = {{ request.script_root | tojson }};
   const textValues = ["Titel", "Untertitel"];
   const selectValues = ["Reihe", "Textform", "Sprache"];
@@ -51,18 +52,26 @@
   }
   
   window.onload = function () {
-    // add event listeners 
-    document.getElementById ("create-button").addEventListener("click", showCreateModal, false);
-    for (const el of document.querySelectorAll('.action-update') ) { 
-      el.addEventListener("click", showUpdateModal, false); 
-    }
-
     // initialise DataTable
     let table = new DataTable('#text-table', {
       paging: false,
       order: []
     });
     deRole("#text-table");
+
+    // create and append "New"-button to
+    let button = document.createElement("button");
+    button.id = "create-button";
+    button.setAttribute("title", "Text hinzufügen");
+    button.innerHTML = "Neu …";
+    button.addEventListener("click", showCreateModal, false);
+    document.getElementById("text-table_wrapper").firstElementChild.firstElementChild.appendChild(button);
+
+    // add event listeners
+    document.getElementById ("create-button").addEventListener("click", showCreateModal, false);
+    for (const el of document.querySelectorAll('.action-update') ) { 
+      el.addEventListener("click", showUpdateModal, false); 
+    }
   }
 </script>{% endblock script %}
 
@@ -72,13 +81,6 @@
 
 {% include "_icons.svg" %}
 
-<section>
-  <button id="create-button" onclick="showCreateModal()" title="Text hinzufügen">
-    <!-- <svg viewbox="0 0 24 24"><use href="#create" /></svg> -->
-    Neu …
-  </button>
-</section>
-
 <table id="text-table">
   <thead>
     <tr>

the_works/templates/views/werk.html

@@ -2,7 +2,8 @@
 
 {% block title %}Werke{% endblock title %}
 
-{% block script %}<script>
+{% block script %}
+<script>
   const SCRIPT_ROOT = {{ request.script_root | tojson }};
   const textValues = ["Titel", "Untertitel", "Reihennummer", "Erscheinungsdatum", "ISBN_13", "ISBN_10", "ISSN", "Preis", "Klappentext", "Anmerkungen"];
   const selectValues = ["Werksform", "Verlag", "Reihe"];
@@ -11,18 +12,18 @@
   function showCreateModal() {
     // set modal heading
     document.getElementById("dialog-heading").textContent = "Werk hinzufügen";
-    // empty text inputs 
+    // empty text inputs
     for (const v of textValues) { document.getElementById(`form_${v}`).value = ""; }
-    // empty select inputs 
+    // empty select inputs
     for (const v of selectValues) { document.getElementById(`form_${v}`).selectedIndex = ""; }
-    // empty file inputs 
+    // empty file inputs
-    for (const v of blobValues) {} //document.getElementById(`form_${v}`).value = ""; 
+    for (const v of blobValues) {} //document.getElementById(`form_${v}`).value = "";
     // set form action
     document.getElementById("form_submit").formAction = "{{ url_for('werk.create') }}";
     // show modal
     document.getElementById("werkmodal").showModal();
   }
-  
+
   function showUpdateModal() {
     let id = this.dataset.id;
     let url = `${SCRIPT_ROOT}/werk/read/${id}`;
@@ -39,12 +40,12 @@
         function (response) {
           // set modal heading
           document.getElementById("dialog-heading").textContent = "Werk ansehen / bearbeiten";
-          // populate text inputs 
+          // populate text inputs
           for (const v of textValues) { document.getElementById(`form_${v}`).value = response[v]; }
           // populate select imputs
           for (const v of selectValues) { document.getElementById(`form_${v}`).selectedIndex = response[v]; }
-          // populate file inputs  
+          // populate file inputs
-          for (const v of blobValues) {} //document.getElementById(`form_${v}`).value = response[v]; 
+          for (const v of blobValues) {} //document.getElementById(`form_${v}`).value = response[v];
           // set form action
           document.getElementById("form_submit").formAction = `${SCRIPT_ROOT}/werk/update/${id}`;
           // show modal
@@ -53,22 +54,30 @@
       )
       .catch((error) => console.log(error));
   }
-  
-  window.onload = function () {
-    // add event listeners 
-    document.getElementById ("create-button").addEventListener("click", showCreateModal, false);
-    for (const el of document.querySelectorAll('.action-update') ) { 
-      el.addEventListener("click", showUpdateModal, false); 
-    }
 
+  window.onload = function () {
     // initialise DataTable
     let table = new DataTable('#werk-table', {
       paging: false,
       order: []
     });
     deRole("#werk-table");
+
+    // create and append "New"-button to
+    let button = document.createElement("button");
+    button.id = "create-button";
+    button.setAttribute("title", "Werk hinzufügen");
+    button.innerHTML = "Neu …";
+    button.addEventListener("click", showCreateModal, false);
+    document.getElementById("werk-table_wrapper").firstElementChild.firstElementChild.appendChild(button);
+
+    // add event listeners
+    for (const el of document.querySelectorAll('.action-update') ) {
+      el.addEventListener("click", showUpdateModal, false);
+    }
   }
-</script>{% endblock script %}
+</script>
+{% endblock script %}
 
 {% block heading %}Werke{% endblock heading %}
 
@@ -76,13 +85,6 @@
 
 {% include "_icons.svg" %}
 
-<section>
-  <button id="create-button" href="#" title="Werk hinzufügen">
-    <!-- <svg viewbox="0 0 24 24"><use href="#create" /></svg> -->
-    Neu …
-  </button>
-</section>
-
 <table id="werk-table">
   <thead>
     <tr>