<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="one">111</div>
<p>pppp</p>
<input type="text" value="預設值"/>
<a href="###" target="_blank" rel="external nofollow" id="a1">超連結</a>
<div id="box">
<span>span行元素</span>
</div>
</body>
</html>
<script type="text/javascript">
var one = document.getElementsByClassName("one")[0];
one.style.backgroundColor = "pink";
one.style.height = "100px";
//1.寫入文檔
/*
缺點:
1.不能寫入指定的标簽中!
2.直接寫入body中
優點: 不會新資料覆寫舊資料!每次寫入的資料都會自動拼接!!
*/
document.write("哈哈哈你好!!");
document.write("0000789789!!");
document.write("<h1>大标題</h1>");
//2. innerHTML 重點!! 即可給标簽指派 也可 對标簽取值!!
/*
優點:
1.既能寫入文本字元串,也能直接寫标簽
2.可以指定寫入某個父标簽中,不會直接寫入body
缺點:新資料會覆寫舊資料! 但是可以通過 += 來解決!!
*/
one.innerHTML = "周潤發";
console.log(one.innerHTML);
one.innerHTML = one.innerHTML + "周星馳";
one.innerHTML += "<p>直接寫入标簽</p>";
//3. innerText 既可給标簽指派 也可 對标簽取值!!
/*
特點: 隻能寫入字元串,不識别标簽字元串.也是新資料覆寫舊資料!
*/
var p = document.getElementsByTagName("p")[1];
p.innerText = "哈哈";
p.innerText += "<a href='###'>京東</a>"
//4.注意注意!重點! 給input指派或者取值 隻能通過value
var i1 = document.getElementsByTagName("input")[0];
i1.value = "哈哈哈哈我試試!";
i1.value += "肯定可以拼接!";
console.log(i1.value);
</script>
運作結果:
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)