通過jquery添加和操作div，而無需使用任何類似html的代碼

Question

我知道我有一個奇怪的問題，但是有沒有一種方法可以將div元素添加到特定元素，而無需在javascript函數中編寫任何html代碼？

我的意思是：

我通常使用這個：

  $(".divclass").append("<div>Test</div>");

但這很容易“閱讀”，我想要這樣的東西：

  $(".divcalss").append(newDiv.text( "Test");

我想在javascript中沒有HTML，當我操縱CSS或屬性或許多其他thig時，我可以實現它……但是有沒有辦法添加div？

提前致謝。

Answer 1

您可以使用以下內容創建新的DOM元素：

var div = document.createElement('div');

然后將其變成文檔片段，直到使用一些JS將其插入文檔（或您指定的元素）中為止：

var myElement = document.getElementById('myElement');
myElement.appendChild(div);

如果您希望我們使用jQuery進行插入：

$('#myElement').append(div);

Answer 2

嘗試document.createElement。

var myDiv = document.createElement('div'); 

Answer 3

嘗試

var newDiv = document.createElement('div'); 
$(newDiv).text('asd').appendTo('.divclass')

Answer 4

您可以使用document.createElement（）創建HTML元素。

嘗試這個：

function addElement() {
    var newdiv = document.createElement('div');
    newdiv.innerHTML = 'Test';

    $(".divclass").append(newdiv);
}

您可以使用以下方法添加屬性：

newdiv.setAttribute('id', 'newdiv');

Answer 5

另外，如果您想要可重復使用的內容：

$.fn.appendNew = function() {
    var el = document.createElement('div');
    var $el = $(el); 
    this.each(function() {
        $(this).append(el);
    });
    return $el;
}

$('p').appendNew().text('world').css('color', 'red');

http://jsfiddle.net/LKZTC/1/