Question

JS DOM createElements 和 appendChild 不起作用

2020-03-28

1100

javascript html

我正在尝试创建一个包含一些学生信息的网站。因此，我需要创建动态个人资料卡并将其附加到正文中。但 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);

但是屏幕上什么都没有显示。placeHere 是正文的 ID。任何帮助都将不胜感激。

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

Answer 1

the way you creating Student1 Object is wrong var student1 = new student(1, "ABC"); you forget new keywork

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);

或者您可以将其附加到 body 本身，如下所示：

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;