第一种:使用 parent.appendchild()方法
HTML页面
<div id="div1"></div>
JS文件
//第一步创建标签元素节点
var elem=document.createElement("p");
//第二步创建文本节点
var content=document.createTextNode("Hello,BigSpinach!");
//第三步将文本添加到所创建的标签中
elem.appendChild(content);
//第四步,将创建的元素添加到页面中
document.getElementById("div1").appendChild(elem);
显示结果
第二种:使用innerHTML="html代码段"
HTML页面
<div id="div2"></div>
JS文件
document.getElementById("div2").innerHTML="<p>hello div2!</p>";
显示结果
第三种:使用document.write("html代码段")的方法
HTML页面
<body></body>
JS文件
document.write("<p>hello div3!</p>");
显示结果
页面会打印出 hello div3!
第四种:使用jQuery创建HTML元素
HTML页面
<div id="div4"></div>
JS文件
//第一步:创建页面元素
var $p=$("<p></p>");
//第二步:设置属性和值
$p.attr("name","250");
//第三步:设置文本
$p.text("hellow div4!");
//第四步: 将创建的元素添加到指定位置
$("#div4").append($p);