jQuery追加合并div

Question

I've got this simple HTML element:

<div class="progress hidden-tmp" id="progress-template">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

I then proceed to load this as jQuery element:

const TEMPLATE = '#progress-template';

constructor(name, parent) {
    this.name = name;

    /** @type {jQuery|Element} */
    this.element = $(TEMPLATE).clone().attr('id', 'progress-' + name);
    this.moveTo(parent);
}

Later I append this element to "parent", which is another jQuery element #example:

/**
 * Puts progressbar to parent element and set it visible
 * @param {jQuery|Element} parent
 */
moveTo(parent) {
    this.element.detach();
    console.log(this.element.prop('outerHTML'));
    parent.append(this.element);
    this.element.show();
}

If I run the above, the console.log shows this (which is correct):

<div class="progress hidden-tmp" id="progress-myBar">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

But this is what is appended to parent div:

<div class="progress hidden-tmp progress-bar-striped active" id="progress-myBar" style="display: block; width: 25%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>

It appears that both divs in element got merged into one. Any ideas why?

Answer 1

My mistake, I've forgot there is one line that was also playing with inner HTML of that element. So append() works perfectly fine.