如何使用 jquery 创建新元素

Question

我有一个关于 JQuery 和 Dropzone 插件的问题。

我有html这样的代码：

<form action="/file-upload" class="dropzone">
  <div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>

在 dropzone.js 中，我想设置 addRemoveLinks: true 并想稍微调整 link 删除文件的样式。

在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>");
            file.previewElement.appendChild(file._removeLink);
    }

检查元素时的结果是：

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

我只想在标签 a

的外面做一个 div class="custom"

示例：

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

但我不知道为什么。当我尝试在网络浏览器中运行它时， link 不可点击。所以当我尝试检查元素时，它只有这个：

<div class="custom">Remove file</div>

注意标签 a 不见了。

我试着做出这样的结果

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

但是它不能正常工作。

Answer 1

我不熟悉 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);
        }

Answer 2

为了避免混淆并使代码更具可读性，而不是对 html 属性的值使用双引号，而是使用单引号，就像：

Dropzone.createElement("<a class='dz-remove btn btn-default' href='javascript:undefined;' data-dz-remove=''>Remove file</a>")

这样你就可以去掉反斜杠，从中你可能会发现你的代码有什么问题。

如何使用 jquery 创建新元素

how to create new element with jquery

html

javascript

jquery

dropzone.js