Skip to content

Another Examples

Jump to bottom
Fanon Jupkwo edited this page Jun 13, 2022 · 6 revisions

Given these HTML codes, these are JS codes we get respectively:

Example 1

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
let button = document.createElement("button");
button.setAttribute("type", "button");
button.setAttribute("class", "btn btn-primary");
button.setAttribute("data-toggle", "modal");
button.setAttribute("data-target", "#exampleModal");
button.appendChild(document.createTextNode("Launch demo modal "));

let h5 = document.createElement("h5");
h5.setAttribute("class", "modal-title");
h5.setAttribute("id", "exampleModalLabel");
h5.appendChild(document.createTextNode("Modal title "));

let span = document.createElement("span");
span.setAttribute("aria-hidden", "true");
span.appendChild(document.createTextNode("× "));

let button_ = document.createElement("button");
button_.setAttribute("type", "button");
button_.setAttribute("class", "close");
button_.setAttribute("data-dismiss", "modal");
button_.setAttribute("aria-label", "Close");
button_.appendChild(span);

let div = document.createElement("div");
div.setAttribute("class", "modal-header");
div.appendChild(h5);
div.appendChild(button_);

let div_ = document.createElement("div");
div_.setAttribute("class", "modal-body");
div_.appendChild(document.createTextNode("... "));

let button__ = document.createElement("button");
button__.setAttribute("type", "button");
button__.setAttribute("class", "btn btn-secondary");
button__.setAttribute("data-dismiss", "modal");
button__.appendChild(document.createTextNode("Close "));

let button___ = document.createElement("button");
button___.setAttribute("type", "button");
button___.setAttribute("class", "btn btn-primary");
button___.appendChild(document.createTextNode("Save changes "));

let div__ = document.createElement("div");
div__.setAttribute("class", "modal-footer");
div__.appendChild(button__);
div__.appendChild(button___);

let div___ = document.createElement("div");
div___.setAttribute("class", "modal-content");
div___.appendChild(div);
div___.appendChild(div_);
div___.appendChild(div__);

let div____ = document.createElement("div");
div____.setAttribute("class", "modal-dialog");
div____.setAttribute("role", "document");
div____.appendChild(div___);

let div_____ = document.createElement("div");
div_____.setAttribute("class", "modal fade");
div_____.setAttribute("id", "exampleModal");
div_____.setAttribute("tabindex", "-1");
div_____.setAttribute("role", "dialog");
div_____.setAttribute("aria-labelledby", "exampleModalLabel");
div_____.setAttribute("aria-hidden", "true");
div_____.appendChild(div____);

Example 2

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Sample</title>
        <link rel="stylesheet" href="">
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1>Sample</h1>
                <img src="kanye.jpg" alt="kanye">
            </div>
            <div id="main">
                <h2>Main</h2>
                <p>This is the main content.</p>
                <img src="" alt="">
            </div>
            <div id="footer">
                <p>Copyright &copy; 2019</p>
            </div>
        </div>
    </body>
</html>
let title = document.createElement("title");
title.appendChild(document.createTextNode("Sample "));

let link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", "");

let meta = document.createElement("meta");
meta.setAttribute("charset", "utf-8");

let head = document.createElement("head");
head.appendChild(meta);

let h1 = document.createElement("h1");
h1.appendChild(document.createTextNode("Sample "));

let img = document.createElement("img");
img.setAttribute("src", "kanye.jpg");
img.setAttribute("alt", "kanye");

let div = document.createElement("div");
div.setAttribute("id", "header");
div.appendChild(h1);
div.appendChild(img);

let h2 = document.createElement("h2");
h2.appendChild(document.createTextNode("Main "));

let p = document.createElement("p");
p.appendChild(document.createTextNode("This is the main content. "));

let img_ = document.createElement("img");
img_.setAttribute("src", "");
img_.setAttribute("alt", "");

let div_ = document.createElement("div");
div_.setAttribute("id", "main");
div_.appendChild(h2);
div_.appendChild(p);
div_.appendChild(img_);

let p_ = document.createElement("p");
p_.appendChild(document.createTextNode("Copyright © 2019 "));

let div__ = document.createElement("div");
div__.setAttribute("id", "footer");
div__.appendChild(p_);

let div___ = document.createElement("div");
div___.setAttribute("id", "container");
div___.appendChild(div);
div___.appendChild(div_);
div___.appendChild(div__);

let body = document.createElement("body");
body.appendChild(div___);

let html = document.createElement("html");
html.appendChild(head);
html.appendChild(body);
Clone this wiki locally