web-dev-qa-db-fra.com

Comment insérer HTML avant élément en JavaScript sans jQuery?

Comment puis-je réécrire cette opération jQuery en JavaScript pur:

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

Edit: Je préfère la réponse de @Rob W et je pense que ce devrait être la réponse acceptée, pas celle-ci.

Cela fera ce que vous voulez, sans avoir besoin du support de bibliothèques gonflées comme 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

Une méthode peu connue est le element.insertAdjacentHTML . Avec cette méthode (prise en charge par tous les principaux navigateurs, y compris IE 4 ), vous pouvez prendre une chaîne HTML arbitraire et l'insérer n'importe où dans le document.

Pour illustrer la puissance de la méthode, utilisons notre exemple ...:

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

Devient

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

insertAdjacentHTML le premier argument de détermine la position d'insertion. Voici une comparaison avec jQuery:

Comme vous pouvez le voir, c'est très simple à utiliser. En supposant que le sélecteur jQuery ne renvoie qu'un seul élément, vous pouvez généralement utiliser document.querySelector , mais dans ce cas spécifique, utiliser document.getElementById est plus efficace.

110
Rob W

Vous pouvez créer votre propre fonction en javascript comme,

Code 

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

InsertBefore Docs et Exemple

Vous pouvez créer une fonction avant comme,

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

source depuis http://code.jquery.com/jquery-1.9.1.js

7
Rohan Kumar