japery .attr（）在.append（）之后

Question

我以编程方式生成选择选项，但.attr()后.append()函数不会将该属性添加到刚刚附加的元素，而是添加到父亲。

不应该.append()返回刚刚附加的元素吗？

这是一个JSFiddle示例https://jsfiddle.net/cq24uv1x/1/

$("body").html($("<select>").append("<option>").attr('value',"bla bla bla").append("</option>").append("</select>"));

而不是

<select><option value="bla bla bla"></option></select>

我得到了

<select value="bla bla bla"><option></option></select>

Answer 1

试试这个： - https://jsfiddle.net/adiioo7/cq24uv1x/2/

<强> JS： -

$("body").append($("<select>").append($("<option>").attr('value',"bla bla bla")));

Answer 2

如果要将某些属性与新创建的项关联，可以在实际元素之后指定一个对象来定义它们的值：

var option = $("<option>", {
  'value': 'bla bla bla'
})
$("body").html($("<select>").append(option)...

或者更好地适应您当前的语法：

$("body").html($("<select>").append($("<option>", { 'value': 'bla bla bla' })).append($("<option>", .....

为了更好地理解代码无法按预期工作的原因，请查看您正在执行的实际命令：

$("<select>").append("<option>")

您正在append元素上运行<select>函数而不是<option>元素，因此append函数的返回值是您要追加的对象to：选择元素。这就是下一个attr函数向select元素添加属性的原因。

Answer 3

试一试：

$("body").html($("<select>").append($(document.createElement('option')).attr('value',"bla bla bla")));

在您的情况下，您正在调用attr属性中的<select>方法。请记住，jQuery具有链接方法，append返回$(this)。

Answer 4

您的代码无效。因为.attr是设置属性的 试试这个

$("body").html($("<select>").append("<option>test Option").append("</option>").append("</select>"));
$('option').attr('value',"bla bla bla");