使用js向HTML页面动态添加数据（二）：模拟贴文列表

最新推荐文章于 2022-02-11 17:17:44 发布

网上冲浪手

最新推荐文章于 2022-02-11 17:17:44 发布

阅读量702

点赞数

分类专栏：笔记文章标签： js html javascript

本文链接：https://blog.csdn.net/qq_42477391/article/details/111685252

版权

本文介绍如何使用JavaScript向HTML页面动态添加数据，以模拟贴文列表的效果。内容包括向复杂的HTML结构中插入数据，是系列教程的第二部分。

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

向复杂的HTML页面添加数据
模仿贴文列表




<html>
<head>
    <title>贴文列表</title>
    <script src="G:/js/jquery-3.5.1.js"></script>
    <script>
    $(function(){
    
      var item = $("#parent").html();
        $(".load-more").click(function(){
    
          $tr = $(item);
          //找到指定标签添加数据
          $tr.children().children().children(".avatar").attr("src","https://i2.hdslb.com/bfs/face/a54abe16d28ecc4426e71738ddb5b2d2a8a23a3d.jpg_64x64.jpg");//改变头像
          $tr.children().children().children(".nickname").html('#'+Math.floor(Math.random()*0xffffff).toString(16));//改变昵称
          $tr.children().children().children(".nickname").css("background-color",'#'+Math.floor(Math.random()*0xffffff).toString(16));//生成随机颜色
          $tr.children().children().children(".day").html(Math.floor(Math.random()*30).toString(10)+"天前")//改变时间
          var text = ""