js 动态创建和动态添加

最新推荐文章于 2024-05-10 22:28:18 发布
最新推荐文章于 2024-05-10 22:28:18 发布
阅读量5.4k 收藏 8
点赞数 3
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/never_bug/article/details/82185834
版权

动态创建:根据服务器返回的数据来进行创建,本身不知道创建的数量
实例:

最终效果 :

<body id="box">
        <div>
            <ul>
                <li>
                    <a></a>
                    <span></span>
                </li>
                <li>
                    <a></a>
                    <span></span>
                </li>
                <li>
                    <a></a>
                    <span></span>
                </li>
            </ul>
        </div>
    </body>

动态添加步骤:
1,给body添加id为box
2.js动态添加步骤

<script>
        var oDiv_i = document.createElement("div");//动态创建div
        oDiv_i.setAttribute("id","odiv_l");//给div添加id名
        document.getElementById("box").appendChild(oDiv_i);//把div添加到body里

        var oUl_i = document.createElement("ul");//动态创建ul
        oUl_i.setAttribute("id","oUl_l");//给ul添加id名
        document.getElementById("odiv_l").appendChild(oUl_i);//把ul添加到div里

        function oLi(oi_a){//oi_a:动态添加不同li的id
            var oLi_i = document.createElement("li");//动态添加li
            oLi_i.setAttribute("id",oi_a);//给li添加id名
            document.getElementById("oUl_l").appendChild(oLi_i);//把li添加到ul中
            oA(oLi_i);//调用创建a标签的函数
            oSpan(oLi_i);//调用创建span标签的函数
        }
        function oA(li){
            var oA_i = document.createElement("a");//动态添加a
            oA_i.setAttribute("id","oA_l");//给a添加id名
            li.appendChild(oA_i);//把a添加到li中
        }
        function oSpan(li){
            var oSpan_i = document.createElement("span");//动态添加span
            oSpan_i.setAttribute("id","oSpan_l");//给span添加id名
            li.appendChild(oSpan_i);//把span添加到li中
        }
        /*循环遍历,创建三个li*/
        var ids=['id1','id2','id3']//创建数组,存放li的id
        for(var i=0;i<ids.length;i++){//循环遍历    
            oLi(ids[i]);//调用li函数,并且把id分别传入三个li中
        }


</script>

实现效果

发财发财发财!!!
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在JS中如何动态生成一个DOJO WIDGET组件并插入的页面中
bojingwen1984
04-28 286
我想在页面中设置一个添加按钮，当单击这个按钮时候，而可以动态地添加一个DOJO WIDGET到当前页面中，例如：。这里面如果用普通的DOM操作无法实现。在网上查找说利用‘dojo.widget.createWidget’方法，但是调试过程中报错“dojo.widget”is null or not object",然后到DOJO的官方网站的API中查找，居然没有这个‘dojo.widget.cre...
vue 动态表单添加，让你的网站更具交互性
Shids_的博客
03-25 1万+
vue 动态表单添加，让你的网站更具交互性
【JavaScript】JS实用案例分享：动态生成分页组件 通过按键实现移动控制_动态分页按钮(1)
最新发布
2401_84159813的博客
05-10 394
本篇文章所有示例来自于，这些都是前端开发中常用的功能，借此记录一下刷题过程，巩固基础！
身份证读卡器 浏览器插件
css_666的博客
12-25 7444
最近在研究身份证读卡器的浏览器端插件，记录如下 兼容chrome浏览器的有千景、东信。不过这俩价格都比较贵。便宜一点的网上技术比较多的就只有华视了。价格大概是1500。 但是华视读卡器目前没有chrome浏览器的插件。只找到了360急速浏览器和360安全浏览器的插件。 插件地址 html: <input type="button" value="测试" onclick="myReadCard...
js动态创建对象_JS是什么意思
weixin_39759995的博客
12-03 327
很多人都听过js，但是不知道js是什么意思，也不知道js有什么用，下面我为您总结一下js。web前端学习：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）​zhuanlan.zhihu.com一：JS是什么意思Javascript简称js，js是一种脚本语言，是不需要进行编译的，也是浏览器中的一部分，经常用在web客户端脚本语言，主要是用来给html增加动...
html怎么通过js添加id属性值,使用特定的ID在DIV内使用JavaScript动态添加HTML元素
weixin_39901412的博客
06-04 1684
好的,我需要你的帮助.我在Stackoverflow找到一些代码(找不到链接),它通过JS动态生成HTML代码.这里是代码：function create(htmlStr) {var frag = document.createDocumentFragment(),temp = document.createElement('div');temp.innerHTML = htmlStr;while...
javascript动态创建表格及添加数据实例详解
10-24
主要介绍了javascript动态创建表格及添加数据,以实例形式分析了javascript动态创建表格的常用方法,包括不兼容IE6与兼容IE6的实现方法,非常具有实用价值,需要的朋友可以参考下
JavaScript动态创建form表单并提交的实现方法
10-23
主要介绍了JavaScript动态创建form表单并提交的实现方法,涉及JavaScript动态创建页面元素及模拟表单提交的技巧,需要的朋友可以参考下
JS实现为动态创建的元素添加事件操作示例
10-18
本篇文章将详细介绍如何使用 JavaScript（包括原生 JavaScript 和 jQuery）为动态创建的元素添加事件。 1. **原生 JavaScript 实现** 在原生 JavaScript 中，我们可以使用 `addEventListener` 或 `attachEvent`...
JavaScript动态创建link标签到head里的方法
10-25
JavaScript动态创建link标签到head里的方法是前端开发中常见的需求，尤其在动态加载或主题切换等场景下。这里我们将详细探讨三种实现方式：使用jQuery、原生JavaScript以及IE特有的createStyleSheet方法。 首先，...
【JS】js给对象动态添加、设置、删除属性名和属性值
余浩的博客
07-30 1万+
但是当我们遇到需要给对象动态添加属性和属性值时，点获取法好像就不方便了，尤其是我们不知道属性名的时候更麻烦。简短的回答是“有特别的顺序”整数属性会被进行排序，其他属性则按照创建的顺序显示。计算属性的含义很简单[fruit]含义是属性名应该从fruit变量中获取。注意如果我们遍历一个对象，我们获取属性的顺序是和属性添加时的顺序相同吗？当创建一个对象时，我们可以在对象字面量中使用方括号。js中访问对象属性一共有两种方法点获取法和方括号获取法。最常用的对象属性获取方法是点获取法。...
python类动态增加属性和方法
xiaowang_test的博客
08-26 6569
一、动态添加属性 1、为类添加属性，直接加在类上，会使此后所有实例化对象都具备此属性 class Animal: def __init__(self, name, age): self.name = name self.age = age cat = Animal('小花', 1) print(cat.name) # 小花 print(cat.category) # AttributeError: 'Animal' object has no attribut
动态增长数组
C_say_easy_to_me的博客
05-04 1249
#include <stdio.h> #include<stdlib.h> #include<setjmp.h> jmp_buf buf; int current_element = 0; int total_element = 128; char* dynamic = (char*)malloc(total_element);//动态分配数组 void add_element(char c); int main() { if (dynamic == NULL)//判.
页面动态加入<script>标签并执行代码
aigenglong0649的博客
01-27 1202
　　在页面中动态追加html片段的时候，有时候动态添加的代码会含有<script>标签，比如用了一些模板引擎，或者你的代码有些复杂的时候。然而我们用DOM提供的innerHTML方式来添加代码的时候，<script>标签中的代码并不能执行，如果有src属性，指向的外联文件也不会被加载，这并不是浏览器的bug，因为w3c文档就是这么规定的。 那我们有什么...
如何动态加载JS脚本
东杰书屋
03-24 1万+
来源：http://www.douwoo.cn/articles/2006/12/31/1_1167545707.html用ajax开发网站，用ajax的时候，需要用到大量的JS代码，而并是所有的代码都是要第一个载入的页面要用到，所以很多的JS代码动态载入比较合适，下面介绍了四种方法，在ajax开发中，第一种方法不合适，2，3，4方法，本质上是一张方法，详细地的动态加载JS方法如下：1
动态添加js脚本
qq_41431098的博客
08-25 982
第一步:动态创建一个script元素 letscript=document.createElement('script'); 第二步:设置script元素的src属性 script.src='xxx.xx.xx'; 第三步:将script元素添加到head元素中 document.head.appendChild(script); 注意点1:默认情况下，以这种方式创建的<script>元素是以异步方式加载的，相当于添加了async属性，不过这样做可能可能会有问题，...
往数组中动态添加动态数组
weixin_46704406的博客
04-06 882
刚刚在写练习时，发现需要往数组中添加新的数组，而且添加的新的数组也是不固定长度的，在网上查了一下，发现只是说可以那样做但是并没有代码示例，我这里就是就是想把代码写出来供大家参考学习。 import java.util.ArrayList; import java.util.Scanner; public class LingNengChuanShu { public static void main(String[] args) { Scanner sc = new Scanner(System
页面给<ul>动态添加<li>
胡姐姐的博客
12-21 3187
一：页面 Insert title here 11 href="../assets/css/bootstrap.min.css" /> var checkers = ${checkers}; var rid = ${id}; console.log(checkers); function add() { for (var i = 0; i var
JS动态添加div，然后在div中添加元素
热门推荐
创造自我、追求无我
04-09 6万+
需求：    组织部中有个这样的需求，根据年份动态显示该年份下的定性指标！   我的做法：         先是放一个空的div，让后根据指标的数据，动态的往div中添加元素。 代码：  空的div，存放定性指标 动态往div中添加元素： for (var n = 0; n < data.length; n++) {
通过js动态创建标签并添加点击事件
04-13
可以通过以下代码实现： ``` var button = document.createElement("button"); button.innerHTML = "点击"; button.onclick = function() { alert("你点击了这个按钮！"); }; document.body.appendChild(button); ``` 希望能帮到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值