使用jQuery在网页中插入一个DIV,在页面中设置五个按钮,分别是“插入”、“复制”、“替换”、“删除”、“格式”,点击“插入”按钮在DIV中插入一首四行唐诗,点击“复制”按钮,将唐诗正文复制在原文之后,点击“替换”按钮,
时间: 2023-08-27 14:03:45 浏览: 76
将唐诗中的“春”字替换成“秋”,点击“删除”按钮,删除唐诗正文,点击“格式”按钮,将唐诗正文加粗并居中显示。
以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>操作DIV</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#myDiv {
width: 500px;
height: 300px;
border: 1px solid black;
padding: 10px;
margin-bottom: 20px;
overflow: auto;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<button id="insertBtn">插入</button>
<button id="copyBtn">复制</button>
<button id="replaceBtn">替换</button>
<button id="deleteBtn">删除</button>
<button id="formatBtn">格式</button>
<script>
$(document).ready(function() {
$("#insertBtn").click(function() {
$("#myDiv").append("<p>白日依山尽,黄河入海流。</p><p>欲窮千里目,更上一層樓。</p><p>渭城朝雨浥輕塵,客舍青青柳色新。</p><p>勸君更盡一杯酒,西出陽關無故人。</p>");
});
$("#copyBtn").click(function() {
var text = $("#myDiv").text();
$("#myDiv").append("<p>" + text + "</p>");
});
$("#replaceBtn").click(function() {
var text = $("#myDiv").text();
text = text.replace(/春/g, "秋");
$("#myDiv").text(text);
});
$("#deleteBtn").click(function() {
$("#myDiv").empty();
});
$("#formatBtn").click(function() {
$("#myDiv").css({"font-weight": "bold", "text-align": "center"});
});
});
</script>
</body>
</html>
```
注意,为了使DIV可以滚动显示,需要在CSS中设置`overflow: auto;`。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)