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

坚果3年前网站工具1979

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



本文由 坚果-跨境 网站原创,转载请注明出处。

相关文章

用JS/JQuery调换两个div/p/span的顺序

用JS/JQuery调换两个div/p/span的顺序

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

Hotmail更改验证邮箱:确保邮件服务的顺畅运作

Hotmail更改验证邮箱:提升安全保障的重要步骤在今天的数字时代,电子邮件已经成为我们生活和工作的不可或缺的一部分。Hotmail,作为全球最大的邮件服务提供商之一,为数以亿计的用户提供着电子邮件通...

跨境独立站平台建站:115Shop vs. WooCommerce vs. BigCommerce vs. Magento

选择最佳平台:跨境独立站建站的关键考虑因素在当今数字化时代,跨境电商行业蓬勃发展,让越来越多的企业看到了在全球市场获得成功的机会。要进入这个竞争激烈的领域,建立一个强大的跨境独立站是至关重要的。然而,...

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

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

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

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

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

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

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

发表评论    

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