在元素内创建新元素

Question

我想在 dropzone js 中设置一个按钮删除链接的样式。我只是希望它看起来像带有字形图标的引导按钮。

而不是像这样的默认dropzone代码

Dropzone.prototype.defaultOptions = {
    dictRemoveFile: "Remove file",
        if (this.options.addRemoveLinks) {
            file._removeLink = Dropzone.createElement("<a class=\"dz-remove btn btn-default\" href=\"javascript:undefined;\" data-dz-remove>" + this.options.dictRemoveFile + "</a>");
            var custom = Dropzone.createElement("<div class=\"custom\"></div>");
            custom.appendChild(file._removeLink);
            file.previewElement.appendChild(custom);
        }

结果是这样的

  <a class="dz-remove btn btn-default" href="javascript:undefined;" data-dz-remove="">Remove file</a>

我想要这样的结果

<div class="custom">
<button type="button" class="dz-remove btn btn-default" href="javascript:undefined;" data-dz-remove aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
</div>

所以我像这样在 dropzone.js 中添加代码

file._removeLink = Dropzone.createElement("<button type=\"button\" class=\"dz-remove btn btn-default\" href=\"javascript:undefined;\" data-dz-remove aria-label=\"Left Align\">" + this.options.dictRemoveFile + "</button>");
var custom = Dropzone.createElement("<div class=\"custom-btn\"></div>");
var span = Dropzone.createElement("<span class=\"glyphicon glyphicon-align-left\" aria-hidden=\"true\"></span>");
custom.appendChild(file._removeLink);
file.previewElement.appendChild(custom);
span.appendChild(file._removeLink);//i think i code this wrong//
file.previewElement.appendChild(span);//i think i code this wrong too//

现在我只成功了

<div class="custom">
    <button type="button" class="dz-remove btn btn-default" href="javascript:undefined;" data-dz-remove aria-label="Left Align"> 
    </button>
</div>

问题只是按钮左侧的标签跨度（它没有显示出来）。

Answer 1

file._removeLink = Dropzone.createElement("<button type=\"button\" class=\"dz-remove btn btn-default\" href=\"javascript:undefined;\" data-dz-remove aria-label=\"Left Align\">" + this.options.dictRemoveFile + "</button>");
var custom = Dropzone.createElement("<div class=\"custom-btn\"></div>");
var span = Dropzone.createElement("<span class=\"glyphicon glyphicon-align-left\" aria-hidden=\"true\"></span>");
file._removeLink.appendChild(span);
custom.appendChild(file._removeLink);
file.previewElement.appendChild(custom);

试试上面的代码。应该工作