jQuery没有追加整个生成的HTML（td标签）

Question

I have this code:

var priceTextField = $("<td>").append(
  $("<input>")
  .addClass("form-control input-sm")
  .attr("type", "text")
  .attr("placeholder", "Input something or delete me!")
);

And when appending it by...

var priceDataRow = $("<tr>").append(
  priceTextField.clone().find("input").addClass("text-quantity")
).append(
  priceTextField.clone().find("input").addClass("text-price")
).append(
  $("<td>").append(
    $("<button>")
    .addClass("btn btn-danger btn-sm btn-block delete-btn")
    .attr("type", "button")
    .text("Delete")
  )
);

The <td> wrappers from the priceTextField clones are not appearing. However, the button <td> wrappers are.

Example Output:

<tr>
  <input class="form-control input-sm text-quantity" type="text" placeholder="Input something or delete me!" value="444">
  <input class="form-control input-sm text-price" type="text" placeholder="Input something or delete me!" value="44">
  <td>
    <button class="btn btn-danger btn-sm btn-block delete-btn" type="button">Delete</button>
  </td>
</tr>

Have I missed something obvious? If someone could point me in the right direction that would be much appreciated.

Cheers

Answer 1

When you did : priceTextField.clone().find("input").addClass("text-quantity") you actually took the input field and appended that. Not the <td> . Because you used find()

https://api.jquery.com/find/

Description : Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

What you need is end() so that you can pick the <td> itself.

https://api.jquery.com/end/

Description: End the most recent filtering operation in the current chain and return the set of matched elements to its previous state.

Answer 2

尝试使用.end()

priceTextField.clone().find("input").addClass("text-quantity").end()

Answer 3

You are only appending the input elements. This is how jQuery works:

This first example returns a clone of the "td" that you created before.

priceTextField.clone()

But when you do this the "input" element will be returned.

priceTextField.clone().find("input")

What you need to do is save this in a variable first like this:

var priceDataRow = $("<tr>");
var clonedTd = priceTextField.clone();
clonedTd.find("input").addClass("text-quantity");
$(priceDataRow).append(clonedTd);