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"))而不是$("<div></div>")，因为它稍快一些。

Answer 2

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

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

jsFiddle Example

Answer 3

我自己的建议是：

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

JS Fiddle demo

但是，如果您要将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 Fiddle demo

添加div（内容和属性）

3 个答案: