Question

我想知道是否可以将javascript对象附加到DOM？我有一个对象原型，像这样：

function Weapon(damage, type, src) {
  this.damage = damage;
  this.type = type;
  this.src = src;
}

还有一个对象：

var potion = new Weapon(24, 'Potion', 'glove.png');

我正试图通过说：

let test = document.getElementById('test-tile');
test.append(potion.src);

仅将“ glove.png”打印到我要定位的dom元素上。有什么办法可以附加它，而不是jquery的.attr或数据？

Answer 1

您需要创建实际的HTML元素（在本例中大概为<img />）进行添加，而不仅仅是文本URL。

我建议您在对象中创建一个函数，该函数创建HTML并将其附加给您，如下所示：

function Weapon(damage, type, src) {
  this.damage = damage;
  this.type = type;
  this.src = src;
  this.display = function(containerSelector) {
    $(containerSelector).append('<img src="' + this.src + '" />');
  } 
}

var potion = new Weapon(24, 'Potion', 'glove.png');
potion.display('#test-tile');

img {
  width: 50px;
  height: 50px;
  border: 1px solid #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test-tile"></div>

Answer 2

您需要创建图像element，然后可以将其放置在DOM上。看到您可以访问.png文件名，这是相对简单的：

let img = document.createElement('img');
let test = document.getElementById('test-tile');
img.src = potion.src;

test.append(img);

Answer 3

您可以附加指向源.png文件的图像元素。像这样：

test.append('<img src="' + potion.src + '"/'>)

将JS对象附加到DOM

3 个答案: