关于动态创建html中的标签

关注

原创最新推荐文章于 2026-03-31 10:00:26 发布 7.8k 阅读 AI 写同款· GEO 优化 ›

iOS AVDemo（12）：视频解码，MP4 → H.264/H.265 → YUV 的源码 iOS/Android 客户端开发同学如果想要开始学习音视频开发，最丝滑的方式是对有一定了解后，再借助 iOS/Android 平台的音视频能力上手去实践音视频的过程，并借助来分析和理解对应的音视频数据。在这个栏目，我们将通过拆解流程并实现 Demo 来向大家介绍如何在 iOS/Android 平台上手音视频开发。。这个 Demo 里包含以下内容：1）实现一个视频解封装模块；2）实现一个视频解码模块；阅读详情

主要记录如何动态创建标签，以及给标签赋样式。最近的项目需求就是需要根据后段返回的数据长度来动态创建div以及span等标签。----2018-06-26

1、首先需要在界面上创建一个父标签，设置id为mian

在js代码中我们要先通过id查找页面上的标签
var parentDiv = document.getElementById("main");//parentDiv既为mian的实例
2、根据获得的Json数据（arr），根据长度进行循环创建标签
for (var i = 0; i < arr.length; i++) {
        var div1 = document.createElement("div");//声明第一个div的实例
        div1.className = 'CssClass0';            //设置css样式
        parentDiv.appendChild(div1);             //将div1添加到父div（parentDiv）当中
        var div2 = document.createElement("div");//声明第二个div的实例
        div2.className = 'CssClass1';            //设置css样式
        div1.appendChild(div2);                  //将div2添加到div1当中
        var spanAV12 = document.createElement("span");//声明一个span的实例
        spanAV12.innerHTML = "输入的内容:";           //往span中写入内容，也可以是变量的值
        div2.appendChild(spanAV12);                    //将span添加到div2中

        div2.appendChild(document.createElement("br"));//添加换行
3、设置更多的属性

    设置id     div1.id = "HelloWorld";

    设置style div1.style.cssText = "background-color:black;display:block;color:white";

    或者        div1.style.background-color = "black";

    还有就是 display:none这个属性，我经常用在一些界面上的标签或者控件，通过在style中设置这个属性来控制控件的隐藏与显示，显示只要通过id获取到这个控件的实例，然后使用show()方法即可。

    等

4、顺便提一下昨天碰到的一个问题span中的文字如何靠右显示，或局中
<span style="display:block;width:100%;text-align: right;"></span>
先将display设置为块状显示，然后文字靠右显示即可，剧中为text-align:center

闲聊几句：最近世界杯，我猜今年法国夺冠（其实我不关注足球的，哈哈，只能凭感觉，就跟中国女排奥运会在赢了塞尔维亚之后我猜女排能夺冠的那种感觉，我是中国女排铁粉）