在元素内部创建新元素

create new element inside element

本文关键字：元素 创建 内部 新元素      更新时间：2024-03-21

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

而是像这个一样的默认丢弃区域代码

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>

问题只剩下标签span-interbutton（它没有显示）。

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

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

相关文章：