jquery如何动态的添加一条html代码

Posted 2023-05-06

参考技术A

添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容。

实例：

$("p").append("Some appended text.");

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

实例：

$("p").prepend("Some prepended text.");

通过 append() 和 prepend() 方法添加若干新元素

上面的例子中，我们只在被选元素的开头/结尾插入文本/html。

但是append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可通过 jQuery 来生成文本/HTML或者通过 javascript 代码和 DOM 元素。

下面创建若干个新元通过 text/HTML、jQuery 或 JavaScript/DOM 来创建。通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

实例：

function appendText()

var txt1="<p>Text.</p>";               // 以 HTML 创建新元素

var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素

var txt3=document.createElement("p");  // 以 DOM 创建新元素

txt3.innerHTML="Text.";

$("p").append(txt1,txt2,txt3);         // 追加新元素

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容；jQuery before() 方法在被选元素之前插入内容。

实例：

$("img").after("Some text after");

$("img").before("Some text before");

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

下面创建若干新元素通过 text/HTML、jQuery 或JavaScript/DOM 来创建。然后通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

实例：

function afterText()

var txt1="<b>I </b>";                    // 以 HTML 创建新元素

var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素

var txt3=document.createElement("big");  // 通过 DOM 创建新元素

txt3.innerHTML="jQuery!";

$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素

参考资料：jQuery - 添加元素

JQuery - 动态添加Html后，如何使CSS生效，JS代码可用？

今天在开发JQuery Mobile程序时候，需要从服务器取得数据，随后显示在页面上的Listview控件中，数据完整获取到了，也动态添加到Listview控件中，但是数据对应的CSS没有任何效果了，而且操作数据的JS代码也不好使了！！！

一，使动态加载数据对应的CSS生效。

  //刷新Listview，使CSS生效
  $("#控件ID").listview("refresh");

在加载完数据代码之后，加入上面代码，把“控件ID”换成你的真正的Listview控件ID就可以了！其它控件暂时没有尝试，但是Listview肯定可以的！！

下面是我的动态添加数据和使对应CSS生效完整代码：

 1                     var dataArr = responseObject.obj;
 2 
 3                     if (dataArr.length > 0) {
 4 
 5                         var tempHtml = "";
 6 
 7                         for (var i = 0; i < dataArr.length; i++) {
 8                             tempHtml += ‘<li>‘;
 9                             tempHtml += ‘<a href="#" class="notice-data" id="‘ + i + ‘" onclick="GoDetailPage(this.id)">‘;
10                             tempHtml += ‘<img src="../../img/u167.png" style="margin-left:5px;margin-top: 18px">‘;
11                             tempHtml += ‘<h2 style="margin-left: -35px">‘ + dataArr[i].title + ‘</h2>‘;
12                             tempHtml += ‘<p style="margin-left: -35px">‘ + dataArr[i].depart + ‘</p>‘;
13                             tempHtml += ‘<p style="margin-left: 75%;margin-top:-35px">‘ + dataArr[i].date + ‘</p>‘;
14                             tempHtml += ‘</a>‘;
15                             tempHtml += ‘</li>‘;
16                         }
17 
18                         //更新Listview中的html内容
19                         $("#notice-data-list").html(tempHtml);
20 
21                         //刷新Listview，使CSS生效
22                         $("#notice-data-list").listview("refresh");
23 
24                     }

 

二，如何使动态添加数据对应的JS生效

      我的需求可能比较简单，就是点击事件，在这个事件里面处理一些事物。看上面的第9行代码，里面有一个JS事件“onclick”，这样使用最原始的JS代码就可以了！下面是对应的函数代码：

       //访问详细信息页面
        function GoDetailPage(id) {

            alert(id);

            $.mobile.changePage("noticeDetail.html");
        }

上述代码均测试过，可以正常工作！可能我的解决办法不够好，如果您有更好办法，希望您能告诉我，谢谢！[email protected]

参考：

https://blog.csdn.net/u012702547/article/details/45130615