spans[i].insertAdjacentHTML('afterend', '<br/>');

时间: 2024-01-01 22:06:07 浏览: 98

js 日期加红代码适用于各种cms <font color=red>原创</font>

在使用CMS（内容管理系统）时，经常需要对某些内容进行突出显示以吸引用户的注意，比如最近更新或发布的文章。通常，这可能需要深入修改CMS的源代码，并增加大量自定义代码，从而对系统进行定制。为了避免这种复杂和繁琐的操作，可以使用JavaScript来动态地将特定格式的日期加红。下面将详细解释这种做法。我们关注的HTML结构是一个包含若干`<span>`标签的`<div>`容器。每个`<span>`标签内可能包含一个日期字符串，这些日期字符串是我们想要加红显示的目标。 ```html <div id="dxy_r"> <span>05-26</span> <span>05-27</span> <span>05-24</span> <span>05-23</span> <span>05-27</span> <span>05-27</span> <span>05-26</span> <span>05-27</span> <span>05-27</span> <span>05-27</span> </div> ``` 接着，我们将用JavaScript来实现这一功能。该脚本会寻找id为`dxy_r`的`<div>`容器内的所有`<span>`标签，并检查它们的日期是否匹配今天的日期。如果匹配，它将把`<span>`标签的文本颜色设置为红色。 ```javascript <script language="javascript"> // 定义函数jscheckdate来检查日期并加红 function jscheckdate() { var obj = document.getElementById("dxy_r"); // 获取id为dxy_r的div元素 var spans = obj.getElementsByTagName("span"); // 获取该div内所有的span元素 // 获取当前日期，格式为月-日 var today = new Date(); var dd = String(today.getDate()).padStart(2, '0'); // 当天的日，不足两位的前面补零 var mm = String(today.getMonth() + 1).padStart(2, '0'); // 当天的月，月份是从0开始的，所以+1 var yyyy = today.getFullYear(); // 当年的年份 // 由于这里我们只需要月和日，所以使用当前的月份和日期构造字符串 var todayStr = mm + "-" + dd; for(var i = 0; i < spans.length; i++) { var dateStr = spans[i].innerHTML; // 获取当前span中的日期字符串 // 检查日期是否为今天，并且如果它和今天的日期相匹配，将其加红 if(dateStr === todayStr) { spans[i].innerHTML = "<font color='red'>" + spans[i].innerHTML + "</font>"; } } } jscheckdate(); // 运行函数 </script> ``` 在这段代码中，我们首先定义了一个函数`jscheckdate`，它会先获取当前的年、月、日，并将其格式化为`mm-dd`的格式。之后，函数会遍历`id`为`dxy_r`的`<div>`中的所有`<span>`元素，比较它们的日期字符串是否和今天的日期相同。如果相同，就使用`<font>`标签将该日期文本的颜色改为红色。注意，上述JavaScript代码中的日期格式是根据示例代码中给定的`05-27`来设置的。如果需要适应不同的日期格式，可以根据实际情况调整`todayStr`变量的生成方式，以及`dateStr`变量的匹配逻辑。为了确保脚本正常工作，你需要确保你的CMS支持在页面中插入自定义JavaScript代码。通常，这可以在CMS的模板文件中，或者特定的HTML编辑器中实现。如果你不熟悉如何操作，可能需要咨询你的CMS提供商或查阅相关文档。通过使用JavaScript来动态改变页面上特定内容的样式，可以避免直接修改CMS的源代码。这样做不仅可以简化流程，还可以在不改变原始系统的情况下，实现对内容的个性化展示。当然，对于不熟悉JavaScript的人来说，理解和应用这些代码可能具有一定难度，但是掌握了之后，这种技术将非常有用。

这行代码的作用是在 `spans[i]` 元素的后面添加一个 HTML 标签，这个标签是 `<br/>`，表示换行。`insertAdjacentHTML` 方法可以在元素的指定位置插入 HTML 代码，`'afterend'` 参数表示在当前元素的后面插入。因此这行代码的含义是在每个 `span` 标签后面添加一个换行符。

阅读全文

spans[i].insertAdjacentHTML('afterend', '<br/>');

相关推荐

Python库 | Spans-1.1.1.tar.gz

Python库 | hate_spans-0.1.0b0.tar.gz

id为child0100的div，怎样得到里面的span元素，在每个span元素末尾添加

736 None None None None None None None None None 万科四季都会 万科星光世纪 华侨城万科世纪水岸 华章文苑 如何获取span标签中的内容

使用cheerio 转换以下代码 入账 退汇 待客户确认

for(var i=0;i<spans.length;i++){ spans[i].onclick=function(){ console.log(i) } } //解析 var声明的i

统计古诗文网页上各种体裁的唐诗数量。唐诗三百首网页链接为 https://so.gushiwen.cn/gushi/tangshi.aspx 提示：统计页面唐诗数量，即统计HTML代码中标签出现的次数,使用find_all函数统计标签。

org.springframework.web.client.resourceaccessexception: i/o error on post request for "http://localhost:9411/api/v2/spans": connect timed out; nested exception is java.net.sockettimeoutexception: connect timed out

const divspan = document.getElementById('child0100'); const spans = divspan.getElementsByTagName('span'); alert(spans.length); 为啥alert为0

spans = duty_title.find_all('span') area = spans[0].contents[0] num = spans[1].contents[0]

for element in role_name: spans = element.text 修改该代码

spans = driver.find_elements_by_css_selector('.job_request p span')修正成最新代码

var length= (8) ; spans. (9) ='还可以输入'+( (10) )+'个字符';

uniapp上传图片后端报错I/O error on POST request for "http://localhost:9411/api/v2/spans": connect timed out

Warning: Function state mutability can be restricted to view --> whatsweb3org/website/docs/solidity-basic/sample-code/data-types/ReferenceTypePassByReference.sol:9:5: | 9 | function foo() public { | ^ (Relevant source part starts here and spans across multiple lines).

【创新未发表】Matlab实现花朵授粉优化算法FPA-Kmean-Transformer-BiLSTM负荷预测算法研究.rar

综合糖尿病健康数据集.zip

最新推荐

vue遍历对象中的数组取值示例

Android圆角进度条控件的设计与应用

管理建模和仿真的文件

【R语言lattice包实战】：从案例到技巧，图形制作不再难

输入正整数n.打出长度为n的菱形

mui框架实现带侧边栏的响应式布局

"互动学习：行动中的多样性与论文攻读经历"

【交互式图形】：Shiny应用中lattice包的巧妙应用指南

安装包部署到docker中

Android仿知乎横线直线进度条实现教程

736 None None None None None None None None None 万科四季都会万科星光世纪华侨城万科世纪水岸华章文苑如何获取span标签中的内容

使用cheerio 转换以下代码入账退汇待客户确认