为了账号安全,请及时绑定邮箱和手机立即绑定

JS DOM createElements 和appendChild 不起作用

JS DOM createElements 和appendChild 不起作用

绝地无双 2023-10-16 10:23:40
我正在尝试创建一个包含一些学生信息的网站。因此,我需要创建动态配置文件卡并将它们附加到正文中。但 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);然而屏幕上什么也没有显示。place这里是body的id。任何帮助将不胜感激。编辑:显然应用所有必要的更改并将我的脚本标记移动到正文会有所帮助。
查看完整描述

3 回答

?
翻翻过去那场雪

TA贡献2065条经验 获得超13个赞

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


查看完整回答
反对 回复 2023-10-16
?
红糖糍粑

TA贡献1815条经验 获得超6个赞

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



查看完整回答
反对 回复 2023-10-16
?
MYYA

TA贡献1868条经验 获得超4个赞

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


查看完整回答
反对 回复 2023-10-16
  • 3 回答
  • 0 关注
  • 68 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信