JavaScript 在链接之前插入按钮，而不是之后

Question

我有以下代码示例，我在加载页面后插入一个按钮，我希望该按钮进入该 div 内部，但在该链接之后是否可行(link to jsFiddle)？

HTML

<div class="someclass" id="someid">
    <a href="#" class="">Text Here</a>
</div>

JavaScript

(function(root) {
    function bindUIActions() {
        menuElements();
    }
    function menuElements() {
        var menuElements = document.getElementById("someid");
        menuElements.insertAdjacentHTML('afterBegin','<button type="menu-button" id="responsiveToggle" class="menu-button" aria-hidden="true"><i aria-hidden="true" class="icon-reorder"></i>Menu</button>');
    }
    root.NavigationWidget = {
        init: function() {
            bindUIActions();
        }
    };

})(this);
NavigationWidget.init();

Answer 1

看起来代码很多，但更合适的做法是:

var menuElements = document.getElementById("someid"),
    button       = document.createElement('button'),
    i            = document.createElement('i'),
    txt          = document.createTextNode('Menu');

button.type      = 'button';
button.id        = 'responsiveToggle';
button.className = 'menu-button';

i.className      = 'icon-reorder';

button.setAttribute('aria-hidden', 'true');
i.setAttribute('aria-hidden', 'true');

button.appendChild(i);
button.appendChild(txt);
menuElements.appendChild(button);

FIDDLE