使用jQuery在网页中插入一个DIV，在页面中设置五个按
使用jQuery在网页中插入一个DIV，在页面中设置五个按钮，分别是“插入”、“复制”、“替换”、“删除”、“格式”，点击“插入”按钮在DIV中插入一首四行唐诗，点击“复...
使用jQuery在网页中插入一个DIV，在页面中设置五个按钮，分别是“插入”、“复制”、“替换”、“删除”、“格式”，点击“插入”按钮在DIV中插入一首四行唐诗，点击“复制”按钮，将唐诗正文复制在原文之后，点击“替换”按钮，将唐诗正文第三行由<p>元素替换为<div>元素，点击“删除”按钮，将第五、六行唐诗删除，点击“格式”按钮，将唐诗正文设置为蓝色字体。
展开
2个回答
展开全部
这不是固定死的内容格式吗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="插入" onclick="add(1)"/>
<input type="button" value="复制" onclick="add(2)"/>
<input type="button" value="替换" onclick="add(3)"/>
<input type="button" value="删除" onclick="add(4)"/>
<input type="button" value="格式" onclick="add(5)"/>
<br/>
<div id="content">
</div>
<div id="text" style="display:none;">
<p>春眠不觉晓</p><p>处处闻啼鸟</p><p>夜来风雨声</p><p>花落知多少</p>
</div>
<script>
function add(str){
switch(str){
case 1:
$("#content").html($("#text").html());
break;
case 2:
$("#content").append($("#text").html());//以下两种方式任选 添加一个隐藏的div，或者直接写死在上面
break;
case 3:
$("#content").html("<p>春眠不觉晓</p><p>处处闻啼鸟</p><div>夜来风雨声</div><p>花落知多少</p><p>春眠不觉晓</p><p>处处闻啼鸟</p><p>夜来风雨声</p><p>花落知多少</p>");
break;
case 4:
$("#content").html("<p>春眠不觉晓</p><p>处处闻啼鸟</p><div>夜来风雨声</div><p>花落知多少</p><p>春眠不觉晓</p><p>处处闻啼鸟</p>");
break;
case 5:
$("#content").css("color","blue");
break;
default:
break;
}
}
</script>
</body>
<script>
</script>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div {
background-color: #CF3;
}
p {
background-color:#C1FFE0
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#app_charu").click(function(){
var $div1=$("<div></div>");
$div1.html("<p>屋上春鸠鸣，村边杏花白。</p><p>持斧伐远扬，荷锄觇泉脉。</p><p>归燕识故巢，旧人看新历</p><p>临觞忽不御,惆怅远行客。</p>")
$("body").prepend($div1);
});
$("#clone_fuzhi").click(function(){
$("div").append($("p").clone());
});
$("#replace_tihuan").click(function(){
$("div p:eq(2)").replaceWith('<div>归燕识故巢，旧人看新历</div>');
});
$("#remove_sc").click(function(){
$("div p:eq(4)").remove();
$("div p:eq(4)").remove();
});
$("#css_geshi").click(function(){
$("div").css("color","#00F");
});
});
</script>
<button id="app_charu">插入</button>
<button id="clone_fuzhi">复制</button>
<button id="replace_tihuan">替换</button>
<button id="remove_sc">删除</button>
<button id="css_geshi">格式</button>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div {
background-color: #CF3;
}
p {
background-color:#C1FFE0
}
</style>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#app_charu").click(function(){
var $div1=$("<div></div>");
$div1.html("<p>屋上春鸠鸣，村边杏花白。</p><p>持斧伐远扬，荷锄觇泉脉。</p><p>归燕识故巢，旧人看新历</p><p>临觞忽不御,惆怅远行客。</p>")
$("body").prepend($div1);
});
$("#clone_fuzhi").click(function(){
$("div").append($("p").clone());
});
$("#replace_tihuan").click(function(){
$("div p:eq(2)").replaceWith('<div>归燕识故巢，旧人看新历</div>');
});
$("#remove_sc").click(function(){
$("div p:eq(4)").remove();
$("div p:eq(4)").remove();
});
$("#css_geshi").click(function(){
$("div").css("color","#00F");
});
});
</script>
<button id="app_charu">插入</button>
<button id="clone_fuzhi">复制</button>
<button id="replace_tihuan">替换</button>
<button id="remove_sc">删除</button>
<button id="css_geshi">格式</button>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
