如何用jquery创建新元素答案

【问题标题】：how to create new element with jquery如何用jquery创建新元素
【发布时间】：2016-04-09 03:07:28
【问题描述】：

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

我有这样的html代码：

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

在dropzone.js 中，我想设置addRemoveLinks: true 并希望稍微设置链接删除文件的样式。

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

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

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

但它不能正常工作。

【问题讨论】：

范你请创建一个 js fiddle 或 plunker
jsfiddle.net/sbxsa4e3/2那里先生
您能否确认这是否有效jsfiddle.net/sbxsa4e3/4
DropzoneJs 提供 removeTemplate 用于删除文件按钮使用，我在 2015 年提出请求。示例用法：addRemoveLinks : true, removeTemplate: "<span class=\"remove\"><i class=\"icon-cross\"></i></span>"
抱歉 RemoveLinkTemplate 是名称。

标签： javascript jquery html dropzone.js

【解决方案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);
        }

【讨论】：

谢谢先生，请问如何在标签a中创建一个新元素？我想在 a 中添加 span glyphicon。我可以用它附加到吗？

【解决方案2】：

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

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

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

【讨论】：