jquery 动态创造div的并创建不同的id值

jquery 动态创造div的并创建不同的id值,第1张

// 你好,以在 BODY 生成 DIV 为例子给你讲一个吧 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

    var create = 4    // 定义一个数字,用于指定要生成多少个DIV

    var idStr = ""   // 这里是生成之后的所有 div 的  id 字符串

    var idList = new Array()    // 这里是生成之后,所有 div 的 id 数组

    $(function() {

        // 这里循环生成 create 个 div

        for (var i = 1 i <= create i++) {

            // 这里指定 id = "div" + i,对应为 div1 div2 div3

            var id = "div" + i

            var div = $("<div id='" + id + "'>" + id + "</div>")

            $("body").append(div)// body 拼接一个 div

            idStr += id + " "    // 拼接 id 字符串

            idList.push(id)      // 把 id 放到数组里面

        }

        // 如果要获得所有生成的 div 的 ,可以提供两种方法,第一种,在生成的时候,拼接字符串或者放到数组里面,第二种,在生成完 div 之后,遍历获取

        // 1、这里通过循环获取 id 

        var eachId = ""

        $("body >div").each(function() {

            // 获得div的id属性,拼接起来

            eachId += $(this).attr("id") + " "

        })

        alert("我是each出来的id:" + eachId)

        // 2、这里是生成的时候拼接的

        alert("我是带出来的id:" + idStr)

        // 3、这里是通过数组

        var listId = ""

        for (var key in idList) {

            // 获取数组中存储的 id

            listId += idList[key] + " "

        }

        alert("我是数组遍历的id:" + listId)

    })

</script>

$("p").append("<div id="thisidk">我是小杰</div>")//向p元素中追加id为thisidk的div层

jquery插入节点的 *** 作

$("<b>你好吗?</b>").appendTo("p")//将《b》追加到p元素中

$("p").prepend("<b>你好吗?</b>")//向p中前置《b》

$("<b>你好吗?</b>").prependTo("p")//将《b》前置到p元素中

$("p").after("<b>你好吗?</b>")//向p元素后插入《b》

$("<b>你好吗?</b>").insertAfter("p")//将《b》插入到p元素后边

$("p").before("<b>你好吗?</b>")//在p元素之前添加《b》

$("<b>你好吗?</b>").insertBefore("p")//将《b》插入到p元素前面

//生成10个div,div的id分别是id0,id2,id3,id4.............id9

var htmlstr=""

for(var i=0i<10i++){

htmlstr+='<div id="id'+i+'"></div>'

}

$(body).html(htmlstr)


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11947809.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存