如何在使用jQuery将其添加到DOM之前为HTML元素添加新属性

Question

实际上，这可能是标题不完全正确的原因，对不起。 我的问题如下。 我有一个变量（其中包含html），它从ajax响应中得到什么，我想在新属性中添加一些元素。 然后插入dom。

例如，在这里：

ajaxString  = "<b>asd</b>";
replaced    = $("b", $(ajaxString) ).css('background','#ff0000');
$("body").html(replaced);

但这是行不通的。 我希望有人有主意！

谢谢您的帮助！

Answer 1

您可以先在jQuery对象中创建元素，然后在附加元素之前修改其属性。 尝试这个：

$("<b>asd</b>").css('background', '#ff0000').appendTo('body');

Answer 2

这可以使用虚拟元素来完成：

var ajaxString = "<b>asd</b>",
  virtualDiv = $('<div>', {html: ajaxString});

$("b", $(virtualDiv)).css('background', '#ff0000');
$("body").html($("b", $(virtualDiv))[0]);

根据您的评论，您可以使用它来获取虚拟div的所有html：

$("body").html($(virtualDiv).html());

Answer 3

这是您要实现的目标的工作提琴

你应该使用过滤器

var newhtml = $('<b>asd</b><p>asd</p>');

newhtml.filter('b').each(function(){

$(this).css('font-size','50px')
$(this).css('color','blue')

});

newhtml.filter('p').each(function(){

$(this).css('font-size','20px')
$(this).css('color','red')

});

$('body').html(newhtml);

https://jsfiddle.net/c7a6spaj/

干杯