Web API -- DOM -- different ways to create elements -- three ways, five cases

Element creation - to improve the user experience

 

There are three ways to create elements:

1. document.write("code and content of label");
2. Object. innerHTML = "tag and code";
3. document.createElement("name of label");

 

 

1. document.write("code and content of label");

 
    my$("btn").onclick = function () {
      document.write("<p>This is a label</p>");
    };

 

Case 1: use doccolumnet.write to embed external code content (example: Baidu news code)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style type=text/css>
    div {
      font-size: 12px;
      font-family: arial
    }

    .baidu {
      font-size: 14px;
      line-height: 24px;
      font-family: arial
    }

    a, a:link {
      color: #0000cc;
    }

    .baidu span {
      color: #6f6f6f;
      font-size: 12px
    }

    a.more {
      color: #008000;
    }

    a.blk {
      color: #000;
      font-weight: bold;
    }</style>
</head>
<body>

<script language="JavaScript" type="text/JavaScript"
        src="http://news.baidu.com/ns?word=x%20title%3Aiphone&tn=newsfcu&from=news&cl=2&rn=5&ct=0"></script>
</body>
</html>

 

2. Object. innerHTML = "tag and code";

 
    //Click the button to create a p tag in the div
    //The second way is to create elements: object. innerHTML = "tag code and content";

    my$("btn").onclick = function () {
      my$("dv").innerHTML = "<p>The bright moon in front of the bed is suspected to be frost on the ground. Look up at the bright moon and look down to think about hometown</p>"
    };

 

Case 2: click the button to create an image in the div

  <input type="button" value="Let's have a picture." id="btn" />
  <div id="dv"></div>

  <script src="common.js"></script>

  <script>
    my$("btn").onclick = function () {
      my$("dv").innerHTML = "<img src='images/liuyan.jpg' alt='Beauty' />";
    };
  </script>

 

Case 3: click the button to create a list, and move the mouse to change the background color

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 250px;
      height: 350px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <input type="button" value="Create list" id="btn" />
  <div id="dv"></div>
  <script src="common.js"></script>
  <script>

    var names = ["Yang Guo", "Guo Jing", "Zhang Wuji", "Zhang Sanfeng", "Qiao Feng", "Linghu Chong"]
    var str = "<ul style='list-style-type:none;cursor:pointer'>";
    my$("btn").onclick = function () {
      //Create corresponding logarithm's li
      for (var i = 0; i < names.length; i++) {
        str += "<li>" + names[i] + "</li>";
      }
      str += "</ul>";
      my$("dv").innerHTML = str;

      //Code execution here,li Already there.
      //Get all li,ergodic,Add mouse in event,Mouse away event
      var list = my$("dv").getElementsByTagName("li");
      for (var i = 0; i < list.length; i++) {
        list[i].onmouseover = function () {
          this.style.backgroundColor = "hotpink";
        };
        list[i].onmouseout = function () {
          this.style.backgroundColor = "";
        };
      }
    };
  </script>
</body>

</html>

 

3. document.createElement("name of label");

Create element: document.createElement("tag name"); object
Append element to parent element
Click the button to create a p in the div
 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 200px;
      height: 150px;
      border: 1px solid pink;
    }
  </style>
</head>

<body>
  <input type="button" value="Establish p" id="btn" />
  <div id="dv"></div>
  <script src="common.js"></script>
  <script>
    my$("btn").onclick = function () {
      //Create elements
      var pObj = document.createElement("p");
      pObj.innerText = ("This is a p");
      // setInnerText(pObj, "This is a p");
      //Append the created child element to the parent element
      my$("dv").appendChild(pObj);
    };

  </script>
</body>

</html>

 

Case 4: click the button to dynamically create a list and mouse over to highlight

If you are adding events in a circular way, it is recommended to use a named function

If you are not adding events in a circular way, anonymous functions are recommended

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 200px;
      height: 400px;
      border: 2px solid pink;
    }

    ul {
      list-style-type: none;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <input type="button" value="Create dynamic list" id="btn" />
  <div id="dv"></div>
  <!-- <input type="button" value="Create list" id="btn"/>
<div id="dv"></div> -->
  <script src="common.js"></script>
  <script>
    //Click the button to create a dynamic list,Add list to div in
    var kungfu = ["Eighteen dragon subduing palms", "Gloomy and enchanting palm", "Sunflower collection", "Jiu Yin Zhen Jing", "Star suction method", "Buddha's palm", "Hua Mian palm", "Jade girl's heart meridian"];

    my$("btn").onclick = function () {
      //Establish ul,hold ul Add to parent now div in
      var ulObj = document.createElement("ul");
      my$("dv").appendChild(ulObj); //Append child elements
      //Dynamic creation li,Add to ul in
      for (var i = 0; i < kungfu.length; i++) {
        var liObj = document.createElement("li");
        //Set up li Text content in the middle
        liObj.innerHTML = kungfu[i];
        ulObj.appendChild(liObj);
        //by li Add mouse in and out events
        liObj.onmouseover = mouseoverHandle;
        liObj.onmouseout = mouseoutHandle;
      }
    };

    //This position.Outside of button click event
    function mouseoverHandle() {
      this.style.backgroundColor = "hotpink";
    }
    function mouseoutHandle() {
      this.style.backgroundColor = "";
    }

  // Add events in a circular way,Recommended named function
  // If you are not adding events in a circular way,Anonymous functions are recommended

  </script>
</body>

</html>

 

Case 5: click the button to create a form

I debug ged myself for a long time, only to find that I didn't put the two columns created into the for loop

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 300px;
      height: 300px;
      border: 2px solid hotpink;
    }
  </style>
</head>

<body>
  <input type="button" value="Create table" id="btn" />
  <div id="dv"></div>

  <script src="common.js"></script>
  <script>
    var arr = [
      { name: "Baidu", href: "http://www.baidu.com" },
      { name: "Google", href: "http://www.google.com" },
      { name: "Youku", href: "http://www.youku.com" },
      { name: "Potato", href: "http://www.tudou.com" },
      { name: "Nora", href: "http://www.kuaibo.com" },
      { name: "Iqiyi", href: "http://www.aiqiyi.com" }
    ];

    //Click the button to create a table
    my$("btn").onclick = function () {
      //Establish table join div
      var tableObj = document.createElement("table");
      tableObj.border = "1";
      tableObj.cellPadding = "0";
      tableObj.cellSpacing = "0";
      my$("dv").appendChild(tableObj);
      //Create row tr,join table
      for (var i = 0; i < arr.length; i++) {
        var dt = arr[i]; //Each object
        var trObj = document.createElement("tr");
        tableObj.appendChild(trObj);
        //Create first column, add to row
        var td1 = document.createElement("td");
        td1.innerText = dt.name;
        trObj.appendChild(td1);

        //Create a second column to join to the row
        var td2 = document.createElement("td");
        td2.innerHTML = "<a href=" + dt.href + ">" + dt.name + "</a>";
        trObj.appendChild(td2);
      }
    };

  </script>
</body>

</html>

 

 

Keywords: Javascript Google

Added by sharugan on Sun, 08 Dec 2019 00:51:39 +0200

Popular Keywords

©2024 Programming VIP