Web-API之创建元素的三种方式

1. document.write(“标签的代码及内容”)-–>缺陷: 页面上静态结构会被全部覆盖

document.write("

这是一个p标签

"
);

2. 对象.innerHTML = “标签及内容”;

 my$("box").innerHTML = "

大标题

"

点击动态创建列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">点击</button>
<div id="box"></div>
<script src="common.js"></script>
<script>
    var names = ["杨过", "小龙女", "张无忌", "张三丰"];
    my$("btn").onclick = function () {
     
        var str = "
    "; //根据循环拼接li for(var i = 0 ; i < names.length ; i++){ str += "
  • " + names[i] + "
  • "
    ; } str += "
"
; console.log(str); my$("box").innerHTML = str; //当代码执行到这里, 说明列表已经创建成功 var list = ele$("li"); for(var j = 0 ; j <list.length ; j++){ list[j].onmouseover = function () { this.style.backgroundColor = "pink"; } list[j].onmouseout = function () { this.style.backgroundColor = ""; } } } </script> </body> </html>

3. document.createElement("标签名);

  • 创建元素:
    1. 创建—>document.createdElement(“标签名”);
    2. 追加到父级元素的末尾–>父对象.appendChild(“创建的子对象”)
  var count = 0;
    my$("btn").onclick = function () {
     
        count++;
        var obj = document.createElement("h1")
        //设置文本内容
        obj.innerText = "标题标签"+count;
        //放到父元素的末尾
        my$("box").appendChild(obj);
    }

点击动态创建列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="btn">点击</button>
<div id="box"></div>
<script src="common.js"></script>
<script>
    var flag = true;//当成是一个开关. 默认是开着的
    my$("btn").onclick = function () {
     
        if(flag){
     
            //立马把开关关了
            flag = false;
            //1.创建ul并添加到父元素的末尾
            var ulObj = document.createElement("ul");
            my$("box").appendChild(ulObj);
            for(var i = 0 ; i < names.length ; i++){
     
                //创建li, 并添加到ul里面
                var liObj = document.createElement("li");
                liObj.innerText = names[i];
                ulObj.appendChild(liObj);
        }
    }
</script>
</body>
</html>

你可能感兴趣的:(web)