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

坚果3年前网站工具1800

通过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 网站 原创文章,拒绝暴力转载。

相关文章

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

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

外贸网站建设:优化用户体验与提升销售

外贸网站建设:关键步骤和成功要点在全球化的时代,外贸业务已经变得非常竞争激烈。为了在国际市场中脱颖而出,外贸企业需要一个高效、吸引人的在线存在,这就是外贸网站建设的核心。本文将探讨外贸网站建设的关键步...

如何让html页面加载时就调换两个p/span/div的位置

如何让html页面加载时就调换两个p/span/div的位置

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

HTML如何在DIV右上角添加可隐藏的按钮

HTML如何在DIV右上角添加可隐藏的按钮

下面的代码实现了如何在div的右上角设置一个button按钮,当鼠标划过div的时候,button按钮显示,当鼠标划出div的时候,button按钮消失。这个方法除了可以设置div之外,设置img、p...

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

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

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

为何Figma邮箱验证如此重要

Figma邮箱验证: 一步一步教你如何验证你的邮箱在今天的数字时代,邮箱验证是保护用户帐户和信息安全的重要步骤之一。对于Figma用户来说,验证邮箱不仅有助于确保帐户的安全性,还可以享受到更多功能和服...

发表评论    

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