jQuery操做DOM之修改DOM結構

時間 2019-11-12

標籤 jquery dom 修改結構欄目 JQuery 简体版

原文原文鏈接

直接使用瀏覽器提供的API對DOM結構進行修改，不但代碼複雜，並且要針對瀏覽器寫不一樣的代碼。html

有了jQuery，咱們就專一於操做jQuery對象自己，底層的DOM操做由jQuery完成就能夠了，這樣一來，修改DOM也大大簡化了。jquery

添加DOM

要添加新的DOM節點，除了經過jQuery的html()這種暴力方法外，還能夠用append()方法，例如：瀏覽器

<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>

如何向列表新增一個語言？首先要拿到<ul>節點：app

var ul = $('#test-div>ul');

而後，調用append()傳入HTML片斷：函數

ul.append('<li><span>Haskell</span></li>');

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<script src="/static/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>
<script>
'use strict';
var ul = $('#test-div>ul');
ul.append('<li><span>Haskell</span></li>');
</script>

</body>
</html>

結果：spa

除了接受字符串，append()還能夠傳入原始的DOM對象，jQuery對象和函數對象：code

// 建立DOM對象:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 添加DOM對象:
ul.append(ps);

// 添加jQuery對象:
ul.append($('#scheme'));

// 添加函數對象:
ul.append(function (index, html) {
    return '<li><span>Language - ' + index + '</span></li>';
});

傳入函數時，要求返回一個字符串、DOM對象或者jQuery對象。由於jQuery的append()可能做用於一組DOM節點，只有傳入函數才能針對每一個DOM生成不一樣的子節點。htm

append()把DOM添加到最後，prepend()則把DOM添加到最前。對象

另外注意，若是要添加的DOM節點已經存在於HTML文檔中，它會首先從文檔移除，而後再添加，也就是說，用append()，你能夠移動一個DOM節點。blog

若是要把新節點插入到指定位置，例如，JavaScript和Python之間，那麼，能夠先定位到JavaScript，而後用after()方法：

var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Lua</span></li>');

也就是說，同級節點能夠用after()或者before()方法。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。