HTML通过JS动态生成简单网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态生成网页</title>
<script type="text/javascript">
function init(){
var head=document.createElement("h2");//新建元素节点
var headText=document.createTextNode("动态生成网页演示");//新建文本节点
head.setAttribute("style","text-align: center;");//为新建的元素节点设置属性
document.body.appendChild(head).appendChild(headText);//将新建的元素节点添加到已知元素body中，并将新建的文本节点添加到新建的元素节点中
/*以下部分同理，不再赘述*/
var img=document.createElement("img");
img.setAttribute("src","img/S91002-10402721.png");
img.setAttribute("style","margin: auto;width: 800px;display: block;overflow: hidden;");
document.body.appendChild(img);
var mp3=document.createElement("audio");
mp3.setAttribute("src","img/玄觞&双笙-千梦.mp3");
document.body.appendChild(mp3);
var footer=document.createElement("p");
var footerText=document.createTextNode("页脚");
footer.setAttribute("style","text-align: center;");
document.body.appendChild(footer).appendChild(footerText);
}
</script>
</head>
<body onload="init()"><!--调用函数-->
</body>
</html>
***运行结果：***
1237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
