javascript - 在 anchor 标记文本 jQuery 之前放置 span

标签 javascript jquery html css font-awesome

我正在尝试使用 jQuery/JS 制作这样的按钮

Desired Button Image

这个按钮是使用服务器端 rails helper 生成的。在检查这个元素时我得到了这个

Screenshot

为此我写了下面的代码

   var editLink = makeElement('a', {
            class: 'edit-merchant-url btn btn-primary',
            href: url.BASE_MERCHANT_URLS + data.id + url.EDIT,
            innerHTML: 'Edit'
        });

        var editInnerSpan = makeElement('span', {class: 'fa fa-pencil-square-o'});
        
        editLink.appendChild(editInnerSpan);


 /**
         * It creates the dynamic DOM element
         * element should be tag name such as div, input, form
         * options should be attributes including class, id, innerHTML
         */

        function makeElement(element, options) {
            var $formField = document.createElement(element);
            $.each(options, function (key, value) {
                if (key === 'innerHTML') {
                    $formField.innerHTML = value;
                }
                else {
                    $formField.setAttribute(key, value);
                }
            });
            return $formField;
        }

但是这个创建按钮就像

output

在检查时我得到了这个。

output inspect

我不知道我做错了什么。

最佳答案

应该是:

editLink.prependChild(editInnerSpan)

关于javascript - 在 anchor 标记文本 jQuery 之前放置 span,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32462996/

相关文章:

javascript - Phonegap Cordova - 尝试连接到公共(public) IP 服务器

jquery - MVC、JQUERY、AJAX、HTML 编码 JSON 响应

javascript - 从 iframe 内部检测 <iframe> 高度和宽度

javascript - 在用户输入时运行 javascript 函数

javascript - 类似 jQuery 的架构

javascript - 与 webview 的 DOM 交互

javascript - 根据内容指定文本区域的行数。 HTML、JavaScript

javascript - 使嵌入代码具有宽度和高度

javascript - 为什么 Number.EPSILON 对不同的操作数表现不同?

javascript - False True 通过 onclick jQuery 改变 attr