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。任何帮助将不胜感激。

编辑：
显然应用所有必要的更改并将我的脚本标签移到正文上会有帮助。

Answer 1

您必须将所有这些新创建的元素附加到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 2

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

Answer 3

您创建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>

JS DOM createElements和appendChild不起作用

3 个答案: