原生JS-jQuery : HTML 操作

1. 改变 HTML 内容

JS:

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

jQuery:

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

区别


<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>
    
    <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

js


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

js

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)

"
).insertAfter(jQuery("#act05")); // 下面不可执行,p 为节点对象, jQuery("

(p)后方添加的P元素(/p)

"
) 为jquery对象。 // var p = document.createElement("p"); // p.innerHTML = "

(p)后方添加的P元素(/p)

"
; // p.insertAfter(jQuery("#act05"));

demo”: https://github.com/bp0002/jQueryLearn/blob/master/html/dom_action.html

你可能感兴趣的:(DOM,JavaScript,jquery,html)