学习目标1:使用增添文本节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//第一个函数实现的是,增添的文本节点后置;后者文本节点前置
function fight(){
var textitle = document.createElement("p");
var content = document.createTextNode("moral animal");
textitle.appendChild(content); //借鉴java中的append()
var div = document.getElementById("be brave");
div.appendChild(textitle);
}
function fight2(){
var textitle = document.createElement("p");
var content = document.createTextNode("brave man");
textitle.appendChild(content);
var div = document.getElementById("be brave");
var p1 = document.getElementById("Plan");
div.insertBefore(textitle,p1); //将文本节点放在p1所代表的元素标签之前
// div.appendChild(textitle);
}
textitle.insertBefore();
</script>
</head>
<body>
<button type="button" onclick="fight()">人生百态</button>
<button type="button" onclick="fight2()">勇敢前行</button>
<div id="be brave">
<p id="Plan">技术攻略百篇文章</p>
<p id="Considerate">大数据技术栈的细分</p>
</div>
</body>
</html>