Wie ein Element für alle Klassen in Javascript

Question

ich eine Funktion adName genannt haben vorangestellt wird, dass ich innerhalb des Code Element mit einer Klasse obj eine Spanne mit Text zu machen prepend versuche. Das Problem ist, dass ich immer Fehler erhalte, und das Span Tag ist nicht innerhalb des Tags, stattdessen ist es direkt daneben. Auch ich versuche, alle Code Tags, die Klasse obj haben span Tags zu machen. Aber in meinem Code, die letzte Klasse hat den Spanne Tag von ‚Objekt‘:

So gibt es drei Objekte <code class="obj">poke1</code>, <code class="obj">poke2</code> und pokeAb, und es gibt ein Konstruktor aufgerufen Pokemon. Poke1 & 2 hat Eigenschaften von Name, Typ und Angriff. Wenn ich die Aufrufmethode mit der Methode von pokeAb namens fight aktiviere, und ich einen der Pokes (1 oder 2) in die Klammer setze, wird es die Eigenschaften des Objekts erfassen und etwas ausdrucken, je nachdem, welchen Poke ich aufgerufen habe.

function adName(clas, name, color, back) { 
    var a = document.getElementsByClassName(clas); 
    var b = document.createTextNode(name); 
    var c = document.createElement('span').appendChild(b); 
    var d = document.querySelectorAll('code'); 

    for (var i = 0; i < a.length; ++i) { 
    a[i].parentNode.insertBefore(c, a[i]); 
    a[i].style.background = back; 
    a[i].style.color = color; 
    } 
} 

adName('obj','Object:','#003366','#99ccff'); 

Answer 1

Wenn Sie a[i].parentNode verwenden, erreichen Sie das p Element und das Hinzufügen der span an einen Ort, bevor Codeelement. Sie sollten wie folgt tun:

function adName(clas, name, color, back) { 
var a = document.getElementsByClassName(clas); 
var b = document.createTextNode(name); 
var c = document.createElement('span'); 
c.appendChild(b); 
var d = document.querySelectorAll('code'); 

    for (var i = 0; i < a.length; ++i) { 
    a[i].innerHTML = c.outerHTML + a[i].innerHTML; 
    a[i].style.background = back; 
    a[i].style.color = color; 
    } 
} 

adName('obj','Object:','#003366','#99ccff'); 

JSFiddle

Answer 2

Sie müssen das span-Element in der Schleife erstellen. Hier ist, wie Sie Ihre adName Funktion aussehen sollte

function adName(clas, name, color, back) { 
    var a = document.getElementsByClassName(clas); 
    var b, c; 

    for (var i = 0; i < a.length; ++i) { 
    b = document.createTextNode(name); 
    c = document.createElement('span'); 
    c.appendChild(b); 

    a[i].insertBefore(c, a[i].childNodes[0]); 
    a[i].style.background = back; 
    a[i].style.color = color; 
    } 
} 

diesen Stift Siehe für eine Arbeitslösung http://codepen.io/anon/pen/LNzBJL?editors=1010

Answer 3

konnte nicht Sie betrachten jQuery zu verwenden?

Ihre Funktion wäre viel sauberer:

function adName(clas, name, color, back) { 
    $("." + clas).prepend($("<span/>").html(name)); 
    $("." + clas).css("background-color", back).css("color", color); 
} 

aber wenn Sie reine Javascript behalten möchten:

function adName2(clas, name, color, back) { 
    var a = document.getElementsByClassName(clas); 

    for (var i = 0; i < a.length; ++i) { 
    a[i].innerHTML = name + a[i].innerHTML; 
    a[i].style.background = back; 
    a[i].style.color = color; 
    } 
} 

Plunker: https://plnkr.co/edit/Zq42iRBnijmf2NQ43LfA?p=preview