Question

我有这个简单的HTML元素：

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

然后我继续将其加载为jQuery元素：

const TEMPLATE = '#progress-template';

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

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

稍后我将此元素追加到＆＃34; parent＆＃34;，这是另一个jQuery元素#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();
}

如果我运行上面的命令，console.log会显示这个（这是正确的）：

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

但这是附加到父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>

看来元素中的两个div合并为一个。有什么想法吗？

Answer 1

我的错误，我已经忘记了有一行也在播放该元素的内部HTML。所以append（）的效果非常好。

jQuery追加合并div

1 个答案: