udlr buttons in div js

Sparisoma Viridi

11 Jan 2026 · 2 mins read · edit

result

code

<div id="container">
</div>

<script>
  // define functions
  function createSquareButton(size, caption) {
    let btn = document.createElement("button");
    btn.style.width = size;
    btn.style.height = size;
    btn.style.display = "inline-block";
    btn.style.verticalAlign = "middle";
    btn.innerHTML = caption;
    return btn;
  }
  
  function createSquareInlineDiv(size, fill, content) {
    let div = document.createElement("div");
    div.style.width = size;
    div.style.height = size;
    div.style.background = fill;
    div.style.textAlign = "center";
    if(content == undefined) {
      div.innerHTML = "";
    } else {
      div.innerHTML = content;
    }
    div.style.border = "0px solid blue";
    div.style.display = "inline-block";
    div.style.verticalAlign = "middle";
    return div;
  }
  
  // get container element, set style
  let cnt = document.getElementById("container");
  cnt.style.marginTop = "1em";
  
  // create div a wrapper
  let wrapDiv = document.createElement("div");
  wrapDiv.style.border = "0px solid red";
  wrapDiv.style.width = "94px";
  wrapDiv.style.height = "94px";
  wrapDiv.style.textAlign = "center";
  
  // create other divs
  let ele1 = createSquareInlineDiv("30px");
  let ele2 = createSquareButton("30px", "&uparrow;");
  let ele3 = createSquareInlineDiv("30px");
  let ele4 = createSquareButton("30px", "&leftarrow;");
  let ele5 = createSquareInlineDiv("30px");
  let ele6 = createSquareButton("30px", "&rightarrow;");
  let ele7 = createSquareInlineDiv("30px");
  let ele8 = createSquareButton("30px", "&downarrow;");
  let ele9 = createSquareInlineDiv("30px");
  
  // append elements to the parents
  wrapDiv.append(ele1);
  wrapDiv.append(ele2);
  wrapDiv.append(ele3);
  wrapDiv.append(ele4);
  wrapDiv.append(ele5);
  wrapDiv.append(ele6);
  wrapDiv.append(ele7);
  wrapDiv.append(ele8);
  wrapDiv.append(ele9);
  cnt.append(wrapDiv);
</script>

steps

Open a plain text editor, e.g. vim, nano, Notepad++, VS Code.
Copy and paste code given above.
Save with new name, e.g. jstu-09-udlr-buttons-in-div.html.
View using an internet browser, e.g. Google Chrome, Mozilla Firefox, Apple Safari.
Edit HTML file for further modification.
Save the changes
Refresh internet browser to see updated result.
Repeat the previous three steps (5-7).
Close the internet browser.
Close the plain text editor.