JS DOM createElements和appendChild不工作

Question

我正在尝试创建一个包含一些学生信息的网站。因此，我需要创建动态配置文件卡，并将它们附加到主体。但DOM总是让我着迷。

function student(src, name) {
this.src = src;
this.name = name;
}
var student1 = student(1, "ABC");
var card = document.createElement('div');
card.className = 'card';
var image = document.createElement('img');
image.src = 'images/students/' + student1.src + '.jpg';
card.appendChild(image);
var stuName = document.createElement('p');
stuName.className = 'name';
var stuNameText = document.createTextNode(student1.name);
stuName.appendChild(stuNameText);
card.appendChild(stuName);

然而，屏幕上什么也没有显示。这是身体的id。任何帮助都将不胜感激。

编辑：
显然，应用所有必要的更改并将我的脚本标记移动到body会有所帮助。

Answer 1

创建Student1对象的方式是错误的var student1 = new student(1, "ABC");你忘了新的钥匙工作

function student(src, name) {
this.src = src;
this.name = name;
}
var student1 = new  student(1, "ABC");
var card = document.createElement('div');
card.className = 'card';
var image = document.createElement('img');
image.src = 'images/students/' + student1.src + '.jpg';
card.appendChild(image);
var stuName = document.createElement('p');
stuName.className = 'name';
var stuNameText = document.createTextNode(student1.name);
stuName.appendChild(stuNameText);
card.appendChild(stuName);
var main=document.getElementById('main')
main.appendChild(card)

.card{    color: palevioletred;
background: yellow;}

<div id="main"></div>

Answer 2

您必须将所有这些新创建的元素附加到DOM中已经存在的div中，否则body标记也会起作用。目前，您创建的元素没有附加到DOM。假设你有一个div

<div id="mydiv"></div>

您可以将新创建的元素附加到div中，如下所示：

ley mydiv = document.getElementById('mydiv');
mydiv.appendChild(card);

或者你可以把它附加到身体上，就像这样：

ley body= document.getElementByTagName('body');
body.appendChild(card);

Answer 3

您没有将代码附加到任何DOM元素，而是在body中创建新的div并将代码附加到此div中。<div id="stdCard"></div>然后您可以使用innerHTML将card附加到创建的父div中。document.getElementById("stdCard").innerHTML = card;