美文网首页
元素的新建与插入、新建元素的for循环点击事件等小整理

元素的新建与插入、新建元素的for循环点击事件等小整理

作者: Ruby_min | 来源:发表于2017-11-30 18:28 被阅读0次

       前言:最近几天在忙着找房子、忙着搬家,忙着加班,没能抽出时间整理最近遇到的一些问题。今天是11月的最后一天,2017年就剩整整一个月了,做个小整理。
       相信我们大家对元素的新建与插入等都不陌生,对于列表元素的循环判断点击事件也已经掌握的很好。但是有句话说的好,万事由简入繁,又由繁入简。往往是那些看似简单的做起来却很难,而那些看似麻烦透顶、难以解决的事情,在进行有效的梳理后,发现不过是最为简单的一个问题。为什么要这么说呢?因为最近我在元素的新建与插入以及循环点击判断方法上因为一些疏忽耽误了不少时间。源于此,记录下来,以免后续再犯。
       1)首先做一个简单的创建和插入:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>元素的新建与插入</title>
</head>
<body>
    <div id="wrapper">
        <ul id="somethinglist"></ul>
    </div>
</body>
</html>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<script>
    //新建元素
    var li = document.createElement("li");
    $("#somethinglist").append(li);
    //创建数组
    var span_arr = [];
    for(var i = 0;i<3;i++){
        span_arr[i] = document.createElement("span");
        li.appendChild(span_arr[i]);
    }
</script>
       在控制台可以看到元素已经创建成功并插入到相应的父元素中。 图一:结果示例

       2)接下来进行对新建元素的赋值以及双重循环操作:body部分代码不变,只操作js部分。

<script>
    //可以当做是从后端服务器返回的成功回调中的数据
    var respose_array = [
        {
            "name": "WLM",
            "gender": "female",
            "birthday": "xxxx-10-19"
        },
        {
            "name": "WLM",
            "gender": "female",
            "birthday": "xxxx-10-19"
        },
        {
            "name": "WLM",
            "gender": "female",
            "birthday": "xxxx-10-19"
        }
    ];
    
    for(var j = 0;j<respose_array.length;j++){
        
        //新建元素
        var li = document.createElement("li");
        $("#somethinglist").append(li);
        //创建数组
        var span_arr = [];
        for(var i = 0;i<3;i++){
            span_arr[i] = document.createElement("span");
            li.appendChild(span_arr[i]);
        }   
    }
</script>
       在控制台可以看到元素已经创建成功并插入到相应的父元素中。 图二-结果示例

       接着是对新创建的元素进行赋值操作。在for循环中增加赋值操作:

for(var j = 0;j<respose_array.length;j++){
        
        //新建元素
        var li = document.createElement("li");
        $("#somethinglist").append(li);
        //创建数组
        var span_arr = [];
        for(var i = 0;i<3;i++){
            span_arr[i] = document.createElement("span");
            li.appendChild(span_arr[i]);
        }
        //对span进行赋值
        span_arr[0].innerHTML = respose_array[j].name;
        span_arr[1].innerHTML = respose_array[j].gender;
        span_arr[2].innerHTML = respose_array[j].birthday;
    }

       通过观察页面效果,发现成功插入并赋值。由此可知插入元素与对新建的元素赋值这两个操作并无顺序问题。在先进行插入操作后再赋值也无妨。
       下面说一下对新创建的元素绑定事件的操作。在上述for循环完成后接下来下面的操作:

//对li的循环点击事件
    //注:要想对新建元素绑定事件或者列表操作,需要在创建完所有的元素之后进行才可以。即在上述外层循环结束之后再做单独处理。
    
    //间接
    var somethinglist = document.querySelector("#somethinglist");
    var lis = somethinglist.querySelectorAll("li");
    
    //也或者是在新建li元素的时候,给其设置类,以便在此位置直接获取。
    //var lis = document.querySelectorAll(".list_li");
    
    for(var z = 0;z<lis.length;z++){
        //闭包
        (function(index){
            lis[index].onclick = function(){
                alert(index);
            }
        })(z);
    }

       以上涉及到新创建元素的获取、列表项的循环点击事件、闭包的使用等。之后再从后端数据库获取数据时,可以参照上面的逻辑和方法进行相关元素的创建、赋值、插入以及绑定事件。

相关文章

  • 元素的新建与插入、新建元素的for循环点击事件等小整理

    前言:最近几天在忙着找房子、忙着搬家,忙着加班,没能抽出时间整理最近遇到的一些问题。今天是11月的最后一天,...

  • DOM操作

    创建元素:同时新建(元素节点)(文本节点)(属性节点) 插入节点:动态创建的元素节点插入 append、appen...

  • JS基础

    1. 变量提升 2. 冒泡和捕获 事件传递定义了元素事件触发的顺序。 将 元素插入到 元素中,用户点击 ...

  • Vue中 捕获阶段、冒泡阶段

    事件传递有两种方式:冒泡与捕获。 事件传递定义了元素事件触发的顺序。 如果你将 元素插入到 元素中,用户点...

  • 【React】一段代码告诉你,为什么JSX绑定回调,需要调用bi

    在编写React组件的时候,如果要在元素中插入如点击等事件,需要这么处理: 或者传入匿名函数 原因: 绑定this...

  • 使用脚本操作DOM

    createElement() 可以新建任何类型的标准HTML元素,比如段落、区间、表格、列表等。 createT...

  • web前端-事件冒泡

    时间冒泡就是说: 当点击子元素的时候, 父元素或者祖先元素如果也绑定了点击事件, 那么父元素或者祖先元素的事件也会...

  • 小程序中点击子元素事件而不触发父元素的点击事件

    在测试小程序的时候,发现了这样的一个bug,点击子元素事件d的时候触发父元素的点击事件,从而执行父级的点击事件,跳...

  • 微信小程序阻止事件冒泡

    在测试小程序的时候,发现了这样的一个bug,点击子元素事件d的时候触发父元素的点击事件,从而执行父级的点击事件,跳...

  • angular阻止冒泡

    注:父元素和子元素都有click事件绑定,当点击子元素,希望执行子元素的事件而不执行父元素事件,在子元素事件开始时...

网友评论

      本文标题:元素的新建与插入、新建元素的for循环点击事件等小整理

      本文链接:https://www.haomeiwen.com/subject/zryvbxtx.html