如何来使用jquery动态的往页面添加元素

发布网友发布时间：2022-05-14 19:45

我来回答

共3个回答

懂视网时间：2022-05-15 00:06

这篇文章主要介绍了jQuery实现动态控制页面元素的方法,结合实例形式分析了jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了jQuery实现动态控制页面元素的方法。分享给大家供大家参考，具体如下：

背景

最近做了一个小系统，其中需要在页面对用户的好友进行增删改查。本来没有那么复杂，用表格形式就可以相对容易的实现。

但是考虑到用户的体验度，首先添加尽量不想用输入，就采用将所有用户分类显示，然后点击即可添加。

添加的用户同时在界面显示，显示出用户当前的好友。同时点击已经添加好的好友可进行下一部的业务操作。

当然，删除的操作是仿照手机端那样，右上角有一个红色的“x”，点击该好友即可删除。

最后界面还能退出删除的模式，恢复正常的模式。

功能说明

1. 添加用户：在列表中点击即添加用户，同时添加onclick事件
2. 删除用户：点击该好友即可删除
3. 进入删除模式：将界面改为删除模式，切换onclick事件
4. 恢复正常模式：将界面改为正常模式，切换onclick事件

图片展示

代码

//添加用户为自己常用好友
function Add(e) {
 var friend_id = e.id;
 var name = $("#" + friend_id).html();
 //将要插入页面的好友html代码
 var content = "<p id="friend" + friend_id + "" class="case-item" onclick="" + game_type + "(this)"><p class="ih-item circle effect1"><a href="#"><img class="img_wrong" src="image/wrong.png" style="float: right; width: 15px; height: 15px;display:none" /><p class="spinner"></p><p class="img"><h3 id="" + friend_id + "">" + name + "</h3></p><p class="info"><p class="info-back"><h3 class="info-word">" + info_word + "</h3></p></p></a></p></p>";
 //向数据库添加，通过结果来确定界面显示
 $.ajax({
 url: "userlist.aspx/AddFriend",
 data: "{'username':'" + $('#username').text() + "','friend_id':'" + friend_id + "'}",
 type: 'Post',
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (result) {
 if (result.d == "true") {
 $(".case-content").append(content);//数据库添加成功，插入html代码
 }
 else {
 alert(result.d);
 }
 },
 error: function (err) {
 alert("未知错误");
 }
 });
}
//删除好友
function Delete(e) {
 var friend_id = e.id;
 $.ajax({
 url: "userlist.aspx/DeleteFriend",
 data: "{'username':'" + $('#username').text() + "','friend_id':'" + friend_id + "'}",
 type: 'Post',
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (result) {
 if (result.d == true) {
 $("#" + friend_id).remove();//在界面移除好友
 }
 if (result.d == false) { alert("删除失败"); }
 },
 error: function (err) {
 alert("未知错误");
 }
 });
}
//重置好友-切换到删除模式
function ChangeToDelete() {
 $(".case-item").removeAttr("onclick");//删除onclick事件
 $(".case-item").attr("onclick", "Delete(this);");//添加新的onclick事件
 $(".img_wrong").css("display", "block");//使删除图标可见
 $(".info-word").html("删除");//改变提示文字
}
//关闭重置-切换到正常模式
function ChangeToNormal() {
 $(".case-item").removeAttr("onclick");//删除onclick事件
 $(".case-item").attr("onclick", "");//添加新的onclick事件
 $(".img_wrong").css("display", "none");//使删除图标不可见
 $(".info-word").html(info_back);//恢复提示文字
}

小结

这次练习学到的内容有两点：

1. Ajax和后台的交互；
2. JQuery对页面元素的属性控制

上面是我整理给大家的，希望今后会对大家有帮助。

使用Angular如何实现表格过滤

有关Vue.js如何实现无限滚动加载

使用Angular如何实现表格过滤

使用JavaScript如何实现计算器

在JS中如何生成随机打乱数组

热心网友时间：2022-05-14 21:14

可以使用append，appendTo，或者直接写
$(id).append(dom)
dom.appendTo($(id))
$(id).html(dom)

热心网友时间：2022-05-14 22:32

$('.test').append();