JQuery的DOM文档操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">

</div>
<button>按钮</button>
<!--<p>alex</p>-->
<script src="jquery-3.3.1.js"></script>
<script>
    $(function () {
            // append(内容)  内容可以是 字符串 js对象 jQ对象
            // $(子)appendTo(内容)  内容可以是 字符串 js对象 jQ对象
            // 字符串
          var h1 = "<h1>测试测试</h1>"
            $('button').click(function () {
                $(".box").append(`${h1}`)
            })
            var img = "./shz.png"
            var alt = "素还真"
            var link = "http://www.baidu.com/s?ie=UTF-8&wd=素还真"
            var style = "width:25%;height:25%"
            var html = `<ul>
                            <li >
                                <a href=${link}>
                                    <img style=${style} src="${img}" alt="${alt}" title="${alt}">
                                </a>
                            </li>
                        </ul>`
            $('button').click(function () {
                $('.box').append(html)
            })
        
    //        js对象
        var p = document.createElement('p')
        p.innerText='半神半圣亦半仙，全儒全道是全贤，脑中真书藏万卷，掌握文武半边天'
        $('button').click(function () {
            console.log('通过js对象方式追加到DOM结构')
            console.log(p)
            $(".box").append(p)
        })
    //      JQ对象
        $('button').click(function () {
            $('.box').append($('head').text())
            console.log($('head'))
        })




    })

</script>
</body>
</html>
posted on 2018-10-23 20:11 anyux 阅读(96) 评论(0) 收藏举报