Put text at the right of checkbox

I try to build UI for labels and checkboxes dynamically

My idea is to build it like this

function renderCheckbox(ui, uiField, labelText, idField, nameOnForm){
    let id = abp.helper.getUniqueElementId();
    let container  = $('<div class="form-group col-lg-3 col-md-3 col-sm-6">');
    let label = $('<label class="m-checkbox mt-35px">').attr('for', idField).text(labelText);
    let checkbox = $('<input type="checkbox" class="filter">').attr('name', nameOnForm).attr('id', idField);
    checkbox.appendTo(label);
    let result = container.append(label);

    return result;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="form-group col-lg-3 col-md-3 col-sm-6">
        <label for="HideVerifiedTickets" class="m-checkbox mt-35px">
            <input id="HideVerifiedTickets" class="filter" type="checkbox" name="HideVerifiedTickets" />
            HideVerifiedTickets
            <span></span>
        </label>
    </div>

but the problem is that it generates HTML like this

How can I move text after the checkbox?

Solution

You can create a textNode using the createTextNode() method and append it to the label just like you do with the checkbox.

In the example I removed the for attribute and the ID for the input element because they are probably not needed.

let cb1 = renderCheckbox(null, null, 'Test', 'test');

$(document.forms.form01).append(cb1);

function renderCheckbox(ui, uiField, labelText, nameOnForm) {
  let container = $('<div class="form-group col-lg-3 col-md-3 col-sm-6">');
  let label = $('<label class="m-checkbox mt-35px">');
  let checkbox = $('<input type="checkbox" class="filter">').attr('name', nameOnForm);
  checkbox.appendTo(label);
  let text = $(document.createTextNode(labelText));
  text.appendTo(label);
  container.append(label);

  return container;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form name="form01">
</form>