第一种创建方法(页面加载完成后,页面代码将会被覆盖)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input type="button" value="创建一个p" id="btn"/> 娃哈哈
<div id="dv"></div> <script> //document.write("标签代码及内容");
my$("btn").onclick=function () {
document.write("<p>这是一个p</p>");
};
my$("btn").onclick=function () {
document.write("<p>这是一个p</p>");
};
// document.write("<p>这是一个p</p>");
//document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
</script>
</body>
</html>
第二种创建的方式
<script>
//点击按钮,在div中创建一个p标签
//第二种方式创建元素: 对象.innerHTML="标签代码及内容";
my$("btn").onclick=function () {
my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
};
</script>
第三种创建的方式
//第三种方式创建元素
//创建元素
//document.createElement("标签名字");对象
//把元素追加到父级元素中
//点击按钮,在div中创建一个p
my$("btn").onclick = function () {
//创建元素的
var pObj = document.createElement("p");
setInnnerText(pObj, "这是一个p");
//把创建后的子元素追加到父级元素中
my$("dv").appendChild(pObj);
};
//设置任意元素的中间的文本内容
function setInnnerText(element,text) {
if(typeof element.textContent=="undefined"){
element.innerText=text;
}else{
element.textContent=text;
}
}