用javascript寫出一個div物件

我們有能力用 html 以及 css 把媒材呈現在網頁上，這是網頁寫作基本能力。

再來是，你有能力用 javascript 把媒材也呈現在網頁上嗎？這是網頁互動文本寫作的基本能力。

這是用 div 寫出來的文本。

語法：

<style>
.cla0505 {
border: 1px solid gray;
padding: 1em;
text-align: center;
}
</style>
<div style="display: flex; border: 1px solid gray; padding: 5px;">
<div class="cla0505" style=" border: 1px solid lightgray; flex: 1; margin-right: 3px;">
這是用 div 寫出來的文本。<br>
</div>
<div class="cla0505" style=" border: 1px solid lightgray; flex: 1; margin-left: 3px;">
</div>
</div>
<script>
const newdiv0505 = document.createElement("div");
newdiv0505.innerHTML = "這是用 javascript 寫成的 div。"
document.querySelectorAll(".cla0505")[1].append(newdiv0505);
</script>

為什麼要會使用javascript來寫呢？用DIV不是更簡單嗎？長的都一樣啊!

那是因為用javascript來寫，就可以很容易對這一個 javascript 所生成 div 進行互動控制。即語法中的 newdiv0505 這一個物件。

請按這裡。讓 javascript 的 div 可以變化。

語法：

<div onclick="newdiv0505.style='font-size: 32px; color: red; transform: rotate(10deg);'" style="border: 1px solid red;">
請按這裡。讓 javascript 的 div 可以變化。
</div>