通过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/