jQuery - 添加元素

最新推荐文章于 2024-07-05 14:21:58 发布

jony0303

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量248

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/zjhwqx/article/details/52608618

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append("我是末尾追加文本");
});
$("#btn2").click(function(){
$("ol").append("<li>我是末尾追加列</li>");
});
$("#btn3").click(function(){
$("p").prepend("我是开头追加文本");
});
$("#btn4").click(function(){
$("ol").prepend("<li>我是开头追加列</li>");
});
$("#btn5").click(function(){
$("img").before("<b>我是前面的</b>");
});
$("#btn6").click(function(){
$("img").after("<b>我是后面的</b>");
});
});
function appendText()
{
var txt1="<p>Text1.</p>";
var text2=$("<p></p>").text("Text2");
var text3=document.createElement("p");
text3.innerHTML="Text3";
$("body").append(txt1,text2,text3);
};
function afterText()
{
var txt1="<b style=\"color:red\">    I </b>";
var text2=$("<i></i>").text("love ");
var text3=document.createElement("big");
text3.innerHTML="<b style=\"color:red\">you!</b>";
$("img").after(txt1,text2,text3);
};
function beforeText()
{
var txt1="<b style=\"color:red\">    I </b>";
var text2=$("<i></i>").text("love ");
var text3=document.createElement("big");
text3.innerHTML="<b style=\"color:red\">you!</b>";
$("img").before(txt1,text2,text3);
};
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ol>
<button id="btn1">末尾追加文本</button>
<button id="btn2">末尾追加列表项</button>
<button id="btn3">开头追加文本</button>
<button id="btn4">开头追加列表项</button>
<button οnclick="appendText()">追加多个文本</button>
<hr/>
<img src="GROUPMH.jpg" style="width:200px" alt="mh_logo"><hr/>
<button id="btn5">在图片<font style="color:red">前面</font>添加文本</button>
<button id="btn6">在图片<font style="color:red">后面</font>添加文本</button>
<button οnclick="beforeText()">在图片前面追加多个元素</button>
<button οnclick="afterText()">在图片后面追加多个元素</button>

</body>
</html>