如何在javascript中为所有类预先添加元素

我有一个名为adName的函数，我试图在code元素中使用classobj将span标记为文本。问题是我不断出错，span标记不在code标记内，而是在它旁边。另外，我正在尝试使所有具有类obj的代码标记具有span标记。但在我的代码中，最后一个类有span标记“Object”：

因此有3个对象，分别是poke1、poke2和pokeAb，还有一个名为Pokemon的构造函数。Poke1&2具有名称、类型和攻击属性。当我使用名为

fight

的pokeAb方法激活call方法时，我将其中一个poke（1或2）放在括号内，它将获取对象的属性，并根据我调用的poke打印出一些内容

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');

函数adName（类别、名称、颜色、背面）{
var a=document.getElementsByClassName（clas）；
var b=document.createTextNode（名称）；
var c=document.createElement（'span'）.appendChild（b）；
var d=document.querySelectorAll（'code'）；
对于（变量i=0；i

当您使用

a[i].parentNode

时，您将到达

p

元素，并将

span

添加到code元素之前的位置。你应该这样做：

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');

函数adName（类别、名称、颜色、背面）{
var a=document.getElementsByClassName（clas）；
var b=document.createTextNode（名称）；
var c=document.createElement（'span'）；
c、 儿童（b）；
var d=document.querySelectorAll（'code'）；
对于（变量i=0；i

---

您需要在循环中创建span元素。下面是您的

adName

函数的外观

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;
  }
}

函数adName（类别、名称、颜色、背面）{
var a=document.getElementsByClassName（clas）；
变量b，c；
对于（变量i=0；i

---

为工作解决方案查看此笔

< P>不能考虑使用jQuery？

您的功能将更加简洁：

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

函数adName（类别、名称、颜色、背面）{
$（“+clas）.prepend（$（”“）.html（name））；
$（“+clas）.css（“背景色”，背面）.css（“颜色”，背面）；
}

但如果您想保持纯javascript：

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;
  }
}

函数adName2（类别、名称、颜色、背面）{
var a=document.getElementsByClassName（clas）；
对于（变量i=0；i

---

Plunker:

您想在代码标记之前添加span，还是在代码内部html之前的代码标记内部？我想span标记位于具有objNote类的代码标记内部。注意：您的

innerHTML

解决方案将断开子元素的可能事件侦听器。我认为为“更干净”的解决方案推广jQuery对初学者来说是不好的（除非一些初学者试图重新发明whee…jQuery）