header and footer put in separate js file

js/headfoot.js

+var menu = [{'name':'Informationen', 'combos':[{'name':'Projekte', 'link':'./project'}, {'name':'Über das M4_LAB', 'link':'./index_Projektseite_M4_LAB.html'}], 'type':'dropdown', 'link':'#'},{'name':'Zusammenarbeit', 'combos':[{'name':'...', 'link':'#'}, {'name':'...', 'link':'#'}], 'type':'dropdown', 'link':'#'},{'name':'Events', 'combos':[{'name':'...', 'link':'#'}, {'name':'...', 'link':'#'}], 'type':'dropdown', 'link':'#'},{'name':'Bürgerbeteiligung', 'combos':[{'name':'...', 'link':'#'}, {'name':'...', 'link':'#'}], 'type':'dropdown', 'link':'#'},{'name':'Login', 'combos':[], 'type':'', 'link':'./user/login'}];
+
+var hft_links = [{'url':'#', 'name':'Kontakt'},{'url':'#', 'name':'Impressum'},{'url':'#', 'name':'Datenschutz'}]
+
+var socialmedias = [{'url':'https://twitter.com/HFT_Presse', 'name': 'fa-twitter'}, {'url':'https://www.facebook.com/HfTStuttgart/', 'name': 'fa-facebook-square'}, {'url':'https://www.instagram.com/hft_stuttgart/', 'name': 'fa-instagram'}, {'url':'https://de.linkedin.com/school/hochschule-f%C3%BCr-technik-stuttgart-%E2%80%93-university-of-applied-sciences/', 'name': 'fa-linkedin'}, {'url':'https://www.youtube.com/channel/UCi0_JfF2qMZbOhOnNH5PyHA', 'name': 'fa-youtube'}];
+
+var footer_images = [{'src':'images/demo/bbf_logo.png', 'alt':'BMBF'}, {'src':'images/demo/ihs_logo.jpg', 'alt':'Innovative Hochschule'}]
+
+function prependChild(parent,child){
+    parent.insertBefore(child, parent.childNodes[0]);
+}
+
+/* function head()
+ * creates header and prepends it to the documents body
+ */
+
+function head(){
+    let headerdiv = document.createElement('div');
+    let alertdiv = document.createElement('div');
+    headerdiv.classList.add("wrapper","row1");
+    let navheader = document.createElement('header');
+    navheader.id = "header";
+    navheader.classList.add("clear");
+    let alertbutton = document.createElement('button');
+    alertbutton.type = "button";
+    alertbutton.classList.add("close");
+    alertbutton.setAttribute("data-dismiss", "alert");
+    alertbutton.innerHTML = "×";
+    alertdiv.innerHTML="<strong>Disclaimer</strong> This website is under construction and in prototype-phase. It is not for public use."
+    prependChild(alertdiv, alertbutton);
+    alertdiv.classList.add('alert','alert-danger', 'alert-dismissible', 'fade','show');
+    alertdiv.style = "text-align:center;";
+    navheader.appendChild(alertdiv);
+    let navbar = document.createElement('nav');
+    navbar.classList.add("navbar", "navbar-default");
+    let fluiddiv = document.createElement('div');
+    fluiddiv.classList.add("container-fluid");
+    let navbardiv = document.createElement('div');
+    navbardiv.classList.add("navbar-header");
+    let navelements = document.createElement('ul');
+    navelements.id="navelemente";
+    let logos = document.createElement('li');
+    let link_m4lab = document.createElement('a');
+    link_m4lab.href = "https://www.hft-stuttgart.de/Forschung/M4-Lab/";
+    link_m4lab.innerHTML = "<img src='images/demo/m4lab_logo.jpg' alt='Logo Innovationslabor M4_LAB'>";
+    logos.appendChild(link_m4lab);
+    for (let i = 1; i<5; i++){
+        let link_tv = document.createElement('a');
+        link_tv.href = "https://www.hft-stuttgart.de/Forschung/M4-Lab/Teilvorhaben/Teilvorhaben-" + i;
+        link_tv.innerHTML = "<img src='images/M4_LAB_LOGO_TV_" + i + ".jpg' alt='Logo TV'>";
+        logos.appendChild(link_tv);
+    };
+    navelements.appendChild(logos);
+    for(let j = 0; j<menu.length; j++){
+        let headitem = document.createElement('li');
+        let itemtype = menu[j].type;
+        headitem.classList.add("nav-item")
+        let headlink = document.createElement('a');
+        headlink.href=menu[j].link;
+        headlink.id="navbarDropdown" + j;
+        headlink.classList.add('nav-link');
+        headlink.setAttribute("role", "button");
+        if(itemtype=='dropdown'){
+            headitem.classList.add("dropdown");
+            headlink.classList.add('dropdown-toggle');
+            headlink.setAttribute("data-toggle", "dropdown");
+            headlink.setAttribute("aria-haspopup", "true");
+            headlink.setAttribute("aria-expanded", "false");
+        }
+        headlink.innerHTML=menu[j].name;
+        if(itemtype=='dropdown'){
+            let combodiv = document.createElement('div');
+            combodiv.setAttribute("aria-labelledby",headlink.id);
+            combodiv.classList.add("dropdown-menu");
+            for(let k = 0; k< menu[j].combos.length; k++){
+                let combolink = document.createElement('a');
+                combolink.classList.add("dropdown-item");
+                combolink.href = menu[j].combos[k].link;
+                combolink.innerHTML = menu[j].combos[k].name;
+                combodiv.appendChild(combolink);
+            }
+            headlink.appendChild(combodiv);
+        }
+        headitem.appendChild(headlink);
+        navelements.appendChild(headitem);
+    }
+    let searchitem = document.createElement('li');
+    searchitem.classList.add("nav-item");
+    let searchinput = document.createElement('input');
+    searchinput.value='Suche...'
+    searchinput.type="text";
+    searchinput.classList.add("nav-item-suchfeld");
+    searchinput.setAttribute('onFocus', "this.value=(this.value=='search...')? '' : this.value");
+    searchitem.appendChild(searchinput);
+    let magnifier = document.createElement('input');
+    magnifier.type="image"
+    magnifier.src="images/Lupe_grau.png";
+    magnifier.width="25";
+    magnifier.height="25";
+    magnifier.alt="";
+    magnifier.id="sf_submit";
+    magnifier.value="search";
+    searchitem.appendChild(magnifier);
+    navelements.appendChild(searchitem);
+    navbardiv.appendChild(navelements);
+    fluiddiv.appendChild(navbardiv);
+    navbar.appendChild(fluiddiv);
+    navheader.appendChild(navbar);
+    headerdiv.appendChild(navheader);
+    prependChild(document.body, headerdiv);
+};
+
+/* function foot()
+ * creates footer and appends it to the documents body
+ */
+
+function foot(){
+    let footerdiv = document.createElement('div');
+    footerdiv.id="homepage";
+    footerdiv.classList.add("last", "clear");
+    footerdiv.innerHTML = "<hr>";
+    let containerdiv = document.createElement('div');
+    containerdiv.classList.add('flex-container');
+    let hftlink = document.createElement('a');
+    hftlink.classList.add("col-md-3");
+    hftlink.setAttribute('style','flex-basis: 400px;');
+    hftlink.href="https://www.hft-stuttgart.de";
+    let hftimage = document.createElement('img');
+    hftimage.src="images/demo/hft_logo.jpg"; 
+    hftimage.alt="Logo der Hochschule für Technik Stuttgart";
+    hftimage.height= '75';
+    hftlink.appendChild(hftimage);
+    containerdiv.appendChild(hftlink);
+    let contactdiv = document.createElement('div');
+    contactdiv.classList.add("col-md-3", "footer-unten")
+    contactdiv.setAttribute('style',"flex-basis:400px");
+    contactdiv.innerHTML="Hochschule für Technik Stuttgart";
+    let rowdiv = document.createElement('div');
+    rowdiv.classList.add("row");
+    for(let i = 0; i<hft_links.length; i++){
+        let coldiv = document.createElement('div');
+        coldiv.classList.add("col-md-3", "footer-unten");
+        let collink = document.createElement('a');
+        collink.innerHTML = hft_links[i].name;
+        collink.href = hft_links[i].url;
+        coldiv.appendChild(collink)
+        rowdiv.appendChild(coldiv);
+    }
+    contactdiv.appendChild(rowdiv);
+    containerdiv.appendChild(contactdiv);
+    let socialdiv = document.createElement('div');
+    socialdiv.classList.add("col-md-3");
+    socialdiv.setAttribute('style','flex-basis: 400px;');
+    let socialrow = document.createElement('div');
+    socialrow.id="socialmediabuttons";
+    for(let j = 0; j< socialmedias.length; j++){
+        let sociallink = document.createElement('a');
+        sociallink.href = socialmedias[j].url;
+        let socialcontent = document.createElement('i');
+        socialcontent.classList.add("fab", socialmedias[j].name);
+        sociallink.appendChild(socialcontent);
+        socialrow.appendChild(sociallink);
+    }
+    socialdiv.appendChild(socialrow);
+    containerdiv.appendChild(socialdiv);
+    let imagediv = document.createElement('div');
+    imagediv.classList.add("col-md-3");
+    imagediv.setAttribute("style", "flex-basis:400px;");
+    for (let k = 0; k< footer_images.length; k++){
+        let image = document.createElement('img');
+        image.src = footer_images[k].src;
+        image.width="100";
+        image.height= "50";
+        image.alt = footer_images[k].alt;
+        imagediv.appendChild(image);
+    }
+    containerdiv.appendChild(imagediv);
+    footerdiv.appendChild(containerdiv);
+    document.body.appendChild(footerdiv);
+};
+
+
+head();
+foot();