jQTips · 動態新增元素的清爽寫法

lx熊貓桑發表於2017-08-02
QT

在寫動態新增元素時，一般比較常見的寫法都是這個樣子的：

var newClass = `newDiv`;
var newText = `Demo!`;
var newBody = $(`<div class="` + newClass + `">` + newText + `</div>`);
$(`body`).append(newBody);

如果還需要事件呢，那麼就在前邊加個事件委託：

$(document).on(`click`, `.newDiv`, function(){
    console.info(`Click Me!`);
});

但其實呢，這裡可以還使用jQuery物件的包裝語法，通過查詢文件呢我們知道它的語法是jQuery( html, attributes )，在html引數這裡，我們可以使用一個（不含任何屬性的）單標籤，就是類似於"<div />"、"<div>"以及"<div></div>"這幾種型別的標籤，它和前邊一大長串字串那種的區別在於：前者會用innerHTML實現；而後者則是呼叫.createElement()實現的。

看到這裡你可能會問，如果前邊用了單標籤，那裡邊這堆class啊還有內容啥的該咋辦？答案就在第二個引數attributes上。attributes引數是一個物件，裡邊放的是第一個引數、也就是單標籤裡的屬性，簡單來說你可以將它等同於.attr(attributes)來用，並且，它還能綜合.val()、.css()、.html()、.text()、.data()、.width()、.height()、.offset()之類的功能，比如第一段程式碼就可以改寫成：

var newClass = `newDiv`;
var newText = `Demo!`;
$(`<div>`, {
    `class`: newClass, //和.attr()一樣，由於class是保留字所以要強制加引號
    text: newText
}).appendTo(`body`);

而繫結事件也可以一併寫進去，比如帶有簡寫（即.click()）呼叫的click就可以這樣寫：

var newClass = `newDiv`;
var newText = `Demo!`;
$(`<div>`, {
    `class`: newClass,
    text: newText,
    click: function(){
        console.info(`Click Me!`);
    }
}).appendTo(`body`);

當然也可以寫成：

var newClass = `newDiv`;
var newText = `Demo!`;
$(`<div>`, {
    `class`: newClass,
    text: newText,
    on: {
        click: function() {
            console.info(`Click Me!`);
        }
    }
}).appendTo(`body`);

如果為一堆變數名命名發愁，也可以完全不用變數，變成：

$(`<div>`, {
    `class`: `newDiv`,
    text: `Demo!`,
    click: function(){
        console.info(`Click Me!`);
    }
}).appendTo(`body`);

看起來有沒有比苦逼的字串拼接清爽許多呢？

相關文章