js/jQuery怎么添加div、button、p’等HTML元素的代码

坚果3年前网站工具1978

通过jQuery设置HTML里面的div和button等代码。目的是实现HTML文件里面是空白body,然后body里面的内容全都是js实现输出的。最主要的是用到jQuery的构建html元素和append追加元素等功能。



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>武林编程</title> 
</head>
<body>
</body>


<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
var firstdiv = $('<div id="ymDiv" style="position:relative;width:300px;height:300px;background-color:grey"></div>').text('我是一个div');
$("body").append(firstdiv);
$("#ymDiv").hover(function(){
$("div").append('<button href="#" id="ymA" type="button" style="position:absolute;top:0;right:0;">编辑</button>');
$("#ymA").click(function(){
console.log("protest");
});
$("#ymA").dblclick(function(){
console.log("protest-dblclick");
});
},function(){
$("#ymA").remove();
});
});
</script>
</html>



请尊重 Nut Blog 网站 原创文章,拒绝暴力转载。

相关文章

Thinkphp网站安装部署之后访问网站首页404 Not Found

Thinkphp网站安装部署之后访问网站首页404 Not Found

今天我把Thinkphp网站安装部署之后,发现我的网站在访问网站首页的时候出现了404 Not Found的错误。我检查了一下,没有发现配置问题。在宝塔里面我的网站运行目录设置的是public,域名解...

从小型到大型项目:独立站搭建成本的不同因素

独立站搭建要多少钱?一窥网站建设成本的内幕在今天的数字化世界中,拥有一个独立网站已经成为了许多企业和个人的必备条件。无论是用于在线销售产品、展示作品,还是传达信息,网站都是与全球互联网联系的关键。但是...

Zblog在宝塔面板设置伪静态之后无法访问网站

Zblog在宝塔面板设置伪静态之后无法访问网站

如果你出现下面这种提示:说明你根目录里面默认的index.html没有被删除。这个是宝塔面板新建网站的时候自动在根目录里面创建的几个默认网页之一。因为这个页面与伪静态的index.php冲突,所以导致...

Reddit是什么网站,是做什么的,有什么用途?

Reddit是什么网站,是做什么的,有什么用途?

有很多网友不知道Reddit到底是什么网站,这个网站是做什么的,对普通用户来说有什么用途。下面我们简单来看下。简单介绍一下,小编我是品牌的站外推广运营,其中包括了Reddit运营,负责公司品牌在Red...

为什么需要查邮箱验证码?

随着电子邮件在我们日常生活中的普及,邮箱验证码变得愈加重要。无论您是注册新账户、找回密码、或进行重要的安全验证,邮箱验证码都扮演着关键的角色。本文将深入探讨如何查找邮箱验证码,为什么需要这么做,以及如...

2k邮箱验证的必要性与方法

2k邮箱验证: 保障您的电子信箱安全在今天的数字时代,电子邮件已经成为人们日常生活中不可或缺的一部分。我们用它来与亲朋好友保持联系,处理工作事务,甚至接收账单和银行通知。然而,随着互联网的普及,电子邮...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。