Question

我有一个名为 adName 的函数，我试图在代码元素中添加带元素的 span 标记强> OBJ 即可。问题是我一直收到错误，而 span 标记不在代码标记内，而是在它旁边。此外，我正在努力使所有代码标记具有 obj 类具有 span 标记。但在我的代码中，最后一个类具有'Object'的 span 标记：

因此有3个对象<code class="obj">poke1</code>，<code class="obj">poke2</code>和pokeAb，还有一个名为Pokemon的构造函数。 Poke1＆amp; 2具有名称，类型和攻击属性。当我使用pokeAb的方法fight激活调用方法时，我将其中一个戳（1或2）放在括号内，它将获取对象的属性并打印出一些东西，这取决于我调用的方法

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

当您使用a[i].parentNode时，您将到达p元素并将span添加到代码元素之前的位置。你应该这样做：

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

您需要在循环中创建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;
  }
}

请参阅此笔以获得有效的解决方案http://codepen.io/anon/pen/LNzBJL?editors=1010

Answer 3

你不能考虑使用jQuery吗？

你的功能会更清晰：

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

但是如果你想保持纯粹的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;
  }
}

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

如何在javascript

3 个答案: