js中实现对动态内容的css样式修饰

最新推荐文章于 2024-08-19 08:00:00 发布

痛快最重要

最新推荐文章于 2024-08-19 08:00:00 发布

阅读量698

点赞数

分类专栏： web前端文章标签： js css

本文链接：https://blog.csdn.net/qq_38247544/article/details/85467836

版权

本文介绍如何使用JavaScript动态创建HTML元素并设置CSS样式。通过createElement()创建元素，使用setAttribute()设定样式，如创建div并添加"class"属性。接着将内容动态插入元素内，例如在h3标签中嵌入超链接。最后，将这些元素组织成结构，如将ul插入div。此方法适用于从数据库获取内容并实时展示的情况。

摘要由CSDN通过智能技术生成

下面的代码可以实现将css样式修饰的内容动态显示，

先获取变量，然后

一：用createElement()函数创建相应的元素标签，

如创建一个div：var div1=document.createElement("div");//创建div

二：设置其css样式：

div1.setAttribute("class","blogs");
setAttribute（）可以设置其属性，第一个参数为属性名称，第二个参数为属性的值。

三：将内容嵌入某个标签：

h3.innerHTML="<a title=\""+title+"\" href="+"\"javascript:to('"+title+"')\" target=\"_blank\">"+title+"</a>";
在h3中嵌入了一个超链接

四：将某个标签嵌入其余的标签中：

var ul=document.createElement("ul");//创建ul
div1.append(ul);
在div中嵌入ul

效果类似：

<div>

<ul>

</ul>

</div>

完整代码：

 for (var i=0;i<number;i++)
            { 

              //var content=xmlDoc.getElementsByTagName("content")[i].childNodes[0].nodeValue;
              var times=xmlDoc.getElementsByTagName("time")[i