将图像添加到元素

Question

我正在使用javascript制作一个随机出现在屏幕上的元素。为了使用javascript将图像添加到随机生成的元素，我该怎么办？

function addEnemy() {
  var interval = 0.1;
  if (iterations > 1500) {
    interval = 5;
  } else if (iterations > 1000) {
    interval = 3;
  } else if (iterations > 500) {
    interval = 1;
  }

  if (getRandom(50) == 0) {
    var elementName = "enemy" + getRandom(10000000);
    var enemy = createSprite(elementName, getRandom(450), -40, 45, 45);
    var enemiesDiv = document.getElementById("enemiesDiv");
    var element = document.createElement("div");
    element.id = enemy.element;
    element.className = "enemy";
    enemiesDiv.appendChild(element);
    enemies[enemies.length] = enemy;
    element.enemy.innerHTML
  }
}

Answer 1

你可以创建一个新的img元素，给它你的图像的源，然后将img元素追加到你创建的element。 （我建议使用比“元素”更具描述性的变量名称）

相关代码可能如下所示：

var myImage = document.createElement('img');
myImage.src = 'my_image.jpg';
element.appendChild(myImage);

Answer 2

有点过于宽泛，但我认为你可以考虑使用你创建的div的background属性。像这样的东西：

function addEnemy() {
  var interval = 0.1;
  if (iterations > 1500) {
    interval = 5;
  } else if (iterations > 1000) {
    interval = 3;
  } else if (iterations > 500) {
    interval = 1;
  }

  if (getRandom(50) == 0) {
    var elementName = "enemy" + getRandom(10000000);
    var enemy = createSprite(elementName, getRandom(450), -40, 45, 45);
    var enemiesDiv = document.getElementById("enemiesDiv");
    var element = document.createElement("div");
    element.id = enemy.element;
    element.className = "enemy";

    // Here
    element.style.backgroundImage = "url('img_enemy.png')";

    enemiesDiv.appendChild(element);
    enemies[enemies.length] = enemy;
    element.enemy.innerHTML
  }
}