javaScript动态生成列表(获取点击列表的id)

我有一个div和ul代码如下:

<div id="myDiv">

<ul id="myUl">

</ul>
</div>

------------------------------------------------------------

<script type="text/javaScript">

        //通过id获得ul元素

        var ul = document.getElementById(‘myUl‘);
        //这里我循环5个

   for (var i = 0; i < 5; i++) {
                        //添加 li
                        var li = document.createElement("li");
                        var a = document.createElement("a");
                        ul.appendChild(li);

         li.setAttribute("id", i+1);
                        li.setAttribute("onclick", "getId(this)");
                        li.appendChild(a);
                        a.innerHTML = “数据(可以去循环出想要的数据)”; 

      function getId(obj) {

        //获得点击li元素的id

        var id = obj.id;

        alert("你点击的元素id是"+id);

}

</script>

---------------------------------------------------

最后获得的是

<div id="myDiv" class="monitor">
    <ul id="myUl">
         <li id="1">
            <a>数据(可以去循环出想要的数据)</a>
        </li>
        <li id="2">
            <a>数据(可以去循环出想要的数据)</a>
        </li>
        <li id="3">
            <a>数据(可以去循环出想要的数据)</a>
        </li>
        <li id="4">
            <a>数据(可以去循环出想要的数据)</a>
        </li>
        <li id="5">   
            <a>数据(可以去循环出想要的数据)</a>
        </li>
            </ul>
</div>

时间: 2024-12-18 09:49:30

javaScript动态生成列表(获取点击列表的id)的相关文章

[搬运自我的CSDN博客] python抓取javascript动态生成HTML内容的实践

<注:CSDN博客在美国访问特别卡,所以转移到cnblogs来发文章> 本实验在Ubuntu14.04上完成.使用的浏览器是火狐(Firefox 33.0),python版本是2.7.6. 大家都知道用urllib配合正则表达式抓取静态HTML的内容很方便,但是如果网页中有javascript动态生成的内容,urllib就无能为力了. 此时我们要借助一个额外的工具:selenium.它的工作原理是操纵(火狐)浏览器浏览目标网页,等待网页中的javascript全部执行完毕后再对HTML源码进行

Javascript动态生成表格的性能调优

    vision 0.8 [耗时672ms]终极优化 将字符串作为数组对象的方式是目前效率最高,性能最优的方式.   <script> var t1 = new Date(); </script> <html> <head> <title></title> <script> function testTime(){ var t2 = new Date(); alert(t2-t1+"ms"); }

element-UI,根据后台数据、动态生成el-checkbox-group,点击提交获取绑定checked项以及实现显示默认checked项

<template> <div id="Demo"> <el-form ref="form" label-width="100px"> <el-form-item label="设备名称"> <div class="check-group" v-for="(item, index) in equipments" :key="

在QML中利用Javascript动态生成画面

在这篇文章中介绍如何使用Javascript来动态生产画面. 我们在先前的例子中"如何使用QML动态产生Component来完成我们的气球游戏 (2)"已经对动态生产QML做了一些描述.也许那个项目比较复制,现在我来用一些简单的例子来说明一下,这样更加直观.更多的说明可以参阅文章"Dynamic QML Object Creation from JavaScript". 1)创建我们的动态QML文件 这个文件将被用来被Javascript来动态生产.这是一个模版尽管

通过JavaScript动态生成html控件

示例代码 <html> <head> <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> <title>动态生成控件</title> <script> var i=1; function add() { var top = document.getElementById("t

jquery动态生成button的点击事件

先为button设置onclick事件,对应函数,之后定义函数. $("#pic2").click(function (){...} 无效. 原文地址:https://www.cnblogs.com/He-tao-yuan/p/9766344.html

点击文字弹出一个DIV层窗口代码 【或FORM表单 并且获取点击按钮的ID值】

点击不同按钮咨询不同的 专家 <?php for($i=1;$i<5;$i++){ $uid=$i; //用户ID ?> <a class="a_click" href="javascript:;" onclick="add_to_uid(<?=$uid?>)">点击弹框</a> <?}?> <div class="form1" id="form

动态生成的DOM做点击事件无效

有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果. 例如: <section> 测试动态生成的DOM点击事件 <br /> </section> <script src="jquery-1.11.2.min.js"></script> <script> $(function () { $.ajax({ type: "post",

JavaScript自动生成博文目录导航

我们在写博客的时候,如果博文里面有目录,会给人结构清晰.一种一目了然的感觉,看目录就知道这篇博文要讲解的内容,并且点击目录标题就可以跳转到具体的内容,这样园友们在看博客的时候就可以很方便地浏览自己感兴趣的内容,但是遗憾的是博客园不支持博文目录的生成,好像也有园友给博客园提建议,希望能够像CSDN那样能够自动生成博文目录,但是不知道是什么原因,博客园一直都没有把这个功能加上去,既然没有,那我就自己做吧,研究了2天,总算是按照自己的设想做出来了,最终效果如下: 下面来介绍一下这个小工具的实现. 一.