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

坚果3年前网站工具1936

通过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>



本文首发地址:NutBlog.cn

相关文章

外贸独立站建设费用解析:建站投入与回报

建一个外贸独立站大约多少钱?——了解网站建设的成本在现代数字化时代,拥有一个外贸独立站已经成为国际贸易的一个重要方面。然而,很多初入这一领域的人都会问同一个问题:“建一个外贸独立站大约多少钱?” 这是...

如何在JavaScript中有效验证电子邮件地址

随着互联网的广泛应用,电子邮件已成为我们生活中不可或缺的一部分。无论是用于个人通信还是商业用途,电子邮件都扮演着至关重要的角色。然而,为了保护用户隐私和数据安全,开发人员需要确保在他们的网站上正确验证...

如何有效管理和保障163邮箱登录验证码

163邮箱登录验证码是保护你的电子邮件账户安全的关键。在今天的数字时代,电子邮件是我们生活和工作的不可或缺的一部分。163邮箱,作为中国最大的电子邮件服务提供商之一,每天都处理着大量的电子邮件通信。然...

邮箱验证码验证的步骤:简化您的电子邮件安全

如何验证邮件:一步步教你检查邮箱验证码随着互联网的普及,电子邮件已成为我们日常生活和工作中不可或缺的一部分。我们使用电子邮件发送和接收重要的信息,包括账户密码重置、交易确认和订阅更新等。然而,电子邮件...

ID邮箱验证: 防范身份盗窃的重要步骤

ID邮箱验证: 保护您的账户安全在数字时代,我们越来越多地依赖于互联网来处理我们的金融交易、社交互动和敏感信息传输。因此,保护我们的个人身份和隐私变得至关重要。ID邮箱验证是一项关键的安全措施,可以帮...

盘点2024好用的16款邮件营销平台,EDM营销工具推荐

在当今数字化营销时代,邮件营销仍然是许多企业获取客户、促进销售和建立品牌认知的重要工具。随着技术的不断发展,市场上涌现出越来越多功能强大、易于使用的邮件营销平台,比如蜂邮edm邮件营销平台。本文将为您...

发表评论    

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