Yes. Dom objects have a children collection. Append adds a element to the the end of the collection. You added the card, then the anchor, they are siblings. It add the anchor in the card, you need to find the element in the card you want the anchor to be
a child and append there.
Member
8 Points
85 Posts
order append jquery html is not correct, button should inside div
Apr 05, 2020 09:05 AM|hocamahdi99|LINK
i want to show html using jqery append in this tablebody id div
<div id="TableBody">
but the problem the append html jquery is not in order
here is what i have tried to append html with jquery
var codeBlock = ' <div class="card"> <div class="card-content"> <div class="card-body"> <div class="media mb-4"> ' + '<img class="d-flex mr-3 rounded-circle" src="https://i0.wp.com/mojok.co/terminal/wp-content/uploads/2019/11/deddy.jpg" style="height: 80px; width:80px" alt="">' + ' <div class="media-body">' + '<a href="@Url.Action("Profile","HomeBlog",new { username = Model.Content })">' + '<h5 class="mt-0">' + obj.Name + '</h5>' + ' </a> <span class="text-muted">Last Hours ago</span>' + '<p>' + obj.Comment + '</p>'; $(divsrt).append(codeBlock); $(divsrt).append($("<a>").addClass("btn btn-sm btn-danger").html("Delete").on("click", obj, Delete)).append("</a>") .append($("<a>").addClass("btn btn-sm btn-info").html("Update").on("click", obj, Update)).append("</a>"); var closing = '</div> </div> </div> </div> </div>'; $(divsrt).append(closing);this is html that i get
<div id="TableBody"> <div class="card"> <div class="card-content"> <div class="card-body"> <div class="media mb-4"> <img class="d-flex mr-3 rounded-circle" src="https://i0.wp.com/mojok.co/terminal/wp-content/uploads/2019/11/deddy.jpg" style="height: 80px; width:80px" alt=""> <div class="media-body"><a href="@Url.Action(" profile","homeblog",new="" {="" username="Model.Content" })"=""><h5 class="mt-0">makkarim07@gmail.com</h5> </a> <span class="text-muted">Last Hours ago</span><p>213sadsADasd</p></div></div></div></div></div><a class="btn btn-sm btn-danger">Delete</a><a class="btn btn-sm btn-info">Update</a> </div>it's not what i expected i want the update and delete button inside card but it's outside
here is what i expected
<div id="TableBody"> <div class="card"> <div class="card-content"> <div class="card-body"> <div class="media mb-4"> <img class="d-flex mr-3 rounded-circle" src="https://i0.wp.com/mojok.co/terminal/wp-content/uploads/2019/11/deddy.jpg" style="height: 80px; width:80px" alt=""> <div class="media-body"><a href="@Url.Action(" profile","homeblog",new="" {="" username="Model.Content" })"=""><h5 class="mt-0">makkarim07@gmail.com</h5> </a> <span class="text-muted">Last Hours ago</span><p>213sadsADasd</p> <a class="btn btn-sm btn-danger">Delete</a><a class="btn btn-sm btn-info">Update</a> </div></div></div></div></div> </div>Update and delete button inside card body, is this bug in my code ?
All-Star
58174 Points
15650 Posts
Re: order append jquery html is not correct, button should inside div
Apr 05, 2020 03:28 PM|bruce (sqlwork.com)|LINK
Yes. Dom objects have a children collection. Append adds a element to the the end of the collection. You added the card, then the anchor, they are siblings. It add the anchor in the card, you need to find the element in the card you want the anchor to be a child and append there.