Nunnsy Nunnsy - 1 year ago 59
Javascript Question

jQuery not appending the entire generated HTML (td tag)

I have this code:

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

And when appending it by...

var priceDataRow = $("<tr>").append(
.addClass("btn btn-danger btn-sm btn-block delete-btn")
.attr("type", "button")

wrappers from the priceTextField clones are not appearing. However, the button
wrappers are.

Example Output:

<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">
<button class="btn btn-danger btn-sm btn-block delete-btn" type="button">Delete</button>

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


Answer Source

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()

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.

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