web-dev-qa-db-ja.com

jQueryなしでJavaScriptの要素の前にHTMLを挿入する方法は？

このjQuery操作を純粋なJavaScriptで書き換えるにはどうすればよいですか。

$("#my_id").before('<span class="asterisk">*</span>');
javascriptjqueryhtmldom
41
Aymand Osanes

編集：私は@Rob Wの答えを好み、それはこれではなく受け入れられた答えだと思います。

これは、jQueryのような肥大化したライブラリのサポートを必要とせずに、あなたが望むことをします。

var my_elem = document.getElementById('my_id');

var span = document.createElement('span');
    span.innerHTML = '*';
    span.className = 'asterisk';

my_elem.parentNode.insertBefore(span, my_elem);
59
Codemonkey

あまり知られていないメソッドは _element.insertAdjacentHTML_ です。このメソッド（IE 4を含むすべての主要なブラウザでサポートされています）を使用すると、任意のHTML文字列を取得して、ドキュメント内の任意の場所に挿入できます。

メソッドの威力を説明するために、例を使用してみましょう...：

_$("#my_id").before('<span class="asterisk">*</span>');
_

になる

_document.getElementById('my_id').insertAdjacentHTML('beforebegin',
    '<span class="asterisk">*</span>');
_

insertAdjacentHTML の最初の引数は挿入位置を決定します。 jQueryとの比較は次のとおりです。

ご覧のとおり、非常に使いやすいです。 jQueryセレクターが要素を1つだけ返すと仮定すると、一般的に _document.querySelector_ を使用できますが、この特定のケースでは _document.getElementById_ を使用する方が効率的です。

110
Rob W

次のようなjavascriptで独自の関数を作成できます。

コード

var id = document.getElementById('my_id');
var s = document.createElement('span');
s.innerHTML = '*';
s.className = 'asterisk';
id.parentNode.insertBefore(s, id);

InsertBefore Docsおよび例

次のような関数beforeを作成できます

before: function() {
    return this.domManip( arguments, false, function( elem ) {
        if ( this.parentNode ) {
            this.parentNode.insertBefore( elem, this );
        }
    });
},

http://code.jquery.com/jquery-1.9.1.js からのソース

7
Rohan Kumar