jQuery基础----13jQuery HTML-添加元素

最新推荐文章于 2019-04-23 15:54:57 发布

zhaihaohao1

最新推荐文章于 2019-04-23 15:54:57 发布

阅读量376

点赞数

分类专栏： jQuery基础

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/47702431

版权

jQuery基础专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--jQuery HTML-添加元素-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="js13.js"></script>
</head>
<body>
<p id="pid01">hello world01</p>
<button id="btn01">按钮01</button>
<br/>
<br/>
<p id="pid02">hello world02</p>
<br/>
<button id="btn02">按钮02</button>
<br/>
<button οnclick="appendText()">按钮03</button>
<br/>
</body>
</html>
js:
/**
 * Created by hao on 2015/8/15.
 */
$(document).ready(function(){
    $("#btn01").click(
        function(){
            //append从结尾插入内容，不换行
            //$("#pid01").append("我插入的新内容");
            //从前面插入内容，不换行
            $("#pid01").prepend("我插入的新内容");
        }
    )
    $("#btn02").click(
        function(){
            //从前面插入内容,换行
            //$("#pid02").before("我的奋斗》》》》》》》》》》")
            //从后面插入内容,换行
            $("#pid02").after("我的奋斗》》》》》》》》》》")
        }
    )

});
//添加元素3中方式：html/jquery/dom
function appendText(){
    var text1 = "<p>zhh123</p>"
    var text2 = $("<P></P>").text("张3封");
    var text3 = document.createElement("p");
    text3.innerHTML="张4封";
    $("body").append(text1,text2,text3);

}