原生JS-jQuery : HTML 操作

最新推荐文章于 2023-05-17 18:01:40 发布

bp0002

最新推荐文章于 2023-05-17 18:01:40 发布

阅读量866

点赞数

分类专栏： DOM JavaScript 文章标签： jquery html

本文链接：https://blog.csdn.net/bp0002/article/details/78354767

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

DOM

2 篇文章 0 订阅

订阅专栏

1. 改变 HTML 内容

JS:

document.getElementById(“AID”).innerHTML = “xxxx”;

jQuery:

jQuery(“#AID”).html(“xxxx”);

区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML操作</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        if (!window.jQuery) {
        var script = document.createElement('script');
        script.src = "../common/jquery-3.2.1.min.js";
        document.body.appendChild(script);}
    </script>
</head>
<body>
    <!-- innerHTML -->
    <div id="act01">原内容</div>
    <button id="test01">测试</button>
    <script>
        jQuery("#test01").on(
            'click', 
            function(){
                var p = document.createElement("p");
                // innerHTML可不清除原内容，进行 += 添加。
                p.innerHTML ="原内容";
                p.innerHTML += "(p)修改后内容(/p)";
                // jquery的html(),参数可为节点。
                // 内容直接替换
                jQuery("#act01").html(p);
            }
        );
    </script>
</body>
</html>

2. 元素末尾追加内容:appendChild - append


var p = document.createElement("p");
p.innerHTML = "(p)添加的P元素(/p)";
document.getElementById("act02").appendChild(p);

jQuery

var p = document.createElement("p");
p.innerHTML = "(p)添加的P元素(/p)";
jQuery("#act02").append(p);

3.元素内容最前方追加内容: insertBefore - prepend

var p = document.createElement("p");
p.innerHTML = "(p)添加的P元素(/p)";
var cnt = document.getElementById("act03");
cnt.insertBefore(p, cnt.firstChild);

jQuery

var p = document.createElement("p");
p.innerHTML = "(p)添加的P元素(/p)";
jQuery("#act03").prepend(p);

4.在被选元素之前添加 HTML: insertBefore - before

JS:

var p = document.createElement("p");
p.innerHTML = "(p)前方添加的P元素(/p)";
var cnt = document.getElementById("act04");
document.body.insertBefore(p, cnt);

jQuery:

var p = document.createElement("p");
p.innerHTML = "(p)前方添加的P元素(/p)";
jQuery("#act04").before(p);

5. 在被选元素之后添加 HTML: insertBefore - after / insertAfter

JS:

var p = document.createElement("p");
p.innerHTML = "(p)后方添加的P元素(/p)";
var cnt = document.getElementById("act05");
document.body.insertBefore(p, cnt.nextSibling);

jQuery:

after

var p = document.createElement("p");
p.innerHTML = "(p)后方添加的P元素(/p)";
jQuery("#act05").after(p);

insertAfter

jQuery("<p>(p)后方添加的P元素(/p)</p>").insertAfter(jQuery("#act05"));
// 下面不可执行，p 为节点对象， jQuery("<p>(p)后方添加的P元素(/p)</p>") 为jquery对象。
// var p = document.createElement("p");
// p.innerHTML = "<p>(p)后方添加的P元素(/p)</p>";
// p.insertAfter(jQuery("#act05"));