javascript - 添加 div 与（内容和属性）

Question

$("#container").add("div").html("Hello");

这行有点搞砸了并更改了#container 上的html，或者它至少没有达到我的意图。

我正在寻找在容器 div 中添加具有不同属性和值（html？）的 div，后代。

不太确定如何使用我需要的这些属性和值来修改我想添加的新 div？如何？

Answer 1

那么为什么不只是呢？

$("#container").append("<div>Hello</div>");

要不然：

var $div = $(document.createElement("div"))
           .attr( attributeKey, attributeValue )
           .prop( propertyKey, propertyValue )
           .text("Hello");
$("#container").append($div);

注意：使用$(document.createElement("div"))over$("<div></div>")因为它稍微快一些。

Answer 2

var newDiv = $('<div></div>');
newDiv.attr('id', 'myId');
newDiv.html('Hello World!');

$('#container').append(newDiv);

jsFiddle 示例

Answer 3

我自己的建议是：

$('<div />', {
    'text' : 'Hello world',
    'class' : 'newDiv',
    'click' : function (){
        console.log('You clicked the newly-added div');
    },
    'contentEditable' : true
}).appendTo('#container');

JS 小提琴演示。

但是，如果您想将 HTML 添加到新创建的元素，请'html'使用'text'：

$('<div />', {
    'html' : '<em>more text</em>',
    'class' : 'newDiv',
    'click' : function (){
        console.log('You clicked the newly-added div');
    },
    'contentEditable' : true
}).appendTo('#container');

JS 小提琴演示。