如何使用jquery创建新元素

how to create new element with jquery

本文关键字：元素 新元素 何使用 jquery 创建      更新时间：2024-03-16

我有一个关于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>

但它不能正常工作。

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

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

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

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

相关文章：