JQuery find and update attribute of child element then return the parent element

Question

I have a string representing a checkbox such as follows:

var checkbox = "<div class="text-center"><label for="cb_1"><input type="checkbox" id="cb_1"/></label></div>";

I want to make the checkbox checked (add the attribute checked="checked") such that the string becomes:

<div class="text-center"><label for="cb_1"><input type="checkbox" id="cb_1" checked="checked"/></label></div>;

I have tried the following:

$(checkbox).find('input').attr('checked', true).end().html();

This return the following:

<label for="cb_1"><input type="checkbox" id="cb_1" checked="checked"/></label>

My question is why is the first div not returned and how can I return the whole thing like:

<div class="text-center"><label for="cb_1"><input type="checkbox" id="cb_1" checked="checked"/></label></div>;

Answer 1

html() in jquery uses innerHTML property. In this case, outerHTML need to be used, So

Try using prop('outerHTML')

 var checkbox = '<div class="text-center"><label for="cb_1"><input type="checkbox" id="cb_1"/></label></div>'; console.log($(checkbox).find('input').attr('checked', true).end().prop('outerHTML'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Reference

https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

Answer 2

尝试这个

$($(checkbox).find('input').attr('checked', true).end().parentNode).html();