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

坚果2年前网站工具1666

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



本文由 坚果跨境 原创,禁止暴力转载。

相关文章

Facebook完成公共主页发布授权的解封验证需要多久几天

Facebook完成公共主页发布授权的解封验证需要多久几天

真实数据,来自我公司的几个同事的解封时间。一般是验证之后的几个小时到1个工作日。最快的3-4个小时就恢复发帖权限了。最慢的4-5个工作日还没有好。通过如下操作可以有助于解封和恢复:不要关闭app,不要...

亲测有效:钉钉电脑双开软件工具

亲测有效:钉钉电脑双开软件工具

【使用说明】:首次打开会弹出英文窗口, Talk.exe       pid: 【X1】·   type: Mutant  &nb...

阿里云腾讯云服务器是按包年包月划算还是按带宽计费按流量计费

阿里云腾讯云服务器是按包年包月划算还是按带宽计费按流量计费

你在准备购买阿里云或者腾讯云的云服务器的时候,是否有考虑减少购买成本,比如对比价格、对比型号、对比采购时长的价格优惠等,如果你对以上感兴趣,那么我相信你应该也对下面的不同计费模式感兴趣。因为不同的计费...

如何用JS/JQuery在html的p/span前面加上新的内容/代码

如何用JS/JQuery在html的p/span前面加上新的内容/代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8">...

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

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

为何外贸企业需自建网站?

外贸自建站有哪些平台?我相信这是很多外贸企业主都感到困惑的问题。随着全球化和互联网技术的不断发展,外贸行业的竞争也越来越激烈。为了有效宣传产品和服务,越来越多的外贸企业开始自建站点来展示企业实力和产品...

发表评论    

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