使用append方法动态添加代码时css样式失效/append重复添加内容

防止append重复添加,在append之前使用empty,但是我使用之后第二次css样式失效了,解决方法见下文:

$("#contact").empty();
$("#contact").append(contactstr);

下面的内容是转载的:

$("#所在标签id").append(obj); // 用append 方式添加拼接的标签

$("#所在标签id").listview(“refresh”); //在使用’ul’标签时才使用,作用:刷新列表

$("#所在标签id").trigger(“create”); //重新加载所在标签的样式。不加这一句动态append的标签将丢失Css样式

原文链接:https://blog.csdn.net/chao7842/article/details/54949608

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用`append()`方法动态添加元素并同添加CSS样式,需要注意以下几点: 1. 确保添加CSS样式的选择器与现有的样式不冲突; 2. 确保CSS样式在元素添加到DOM树之后才定义,否则新添加的元素不会应用这些样式; 3. 如果需要在添加元素后立即应用CSS样式,可以使用`setTimeout()`方法或者异步加载样式表的方式。 下面是一个示例代码: ```html <style> .red { color: red; } </style> <div id="container"> <p class="red">Hello World</p> </div> <script> // 添加一个新的段落元素,并在其后添加CSS样式 var p = document.createElement('p'); p.textContent = 'New Paragraph'; p.style.color = 'red'; // 添加CSS样式 document.getElementById('container').append(p); </script> ``` 在上面的代码中,我们使用`createElement()`方法创建一个新的段落元素,并为其添加样式`color: red`。由于样式是在元素添加到DOM树之前定义的,因此新添加的元素会应用这些样式。如果需要异步加载样式表,可以使用以下代码: ```html <style> .red { color: red; } </style> <div id="container"> <p class="red">Hello World</p> </div> <script> // 添加一个新的段落元素,并在其后添加CSS样式 var p = document.createElement('p'); p.textContent = 'New Paragraph'; document.getElementById('container').append(p); // 异步加载样式表 var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'path/to/styles.css'; document.head.append(link); </script> ``` 在上面的代码中,我们先添加了一个新的段落元素,然后使用`createElement()`方法创建一个`link`元素,并设置其`rel`属性为`stylesheet`,`href`属性为样式表的路径。最后,将`link`元素添加到`head`元素中,样式表会异步加载并应用到新添加的元素上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值