【前端】設定好CSS樣式動態新增元素會按照樣式顯示
阿新 • • 發佈:2018-12-05
這篇就是簡單記錄下一個小點:
設定好CSS樣式先,然後動態生成元素,元素可以按照CSS樣式顯示,只要對應到相應的規則即可。
<!DOCTYPE html>
<html>
<head>
<title>Grid Layout Test</title>
<style type="text/css">
.container {
display: grid | inline-grid;
}
#red {
color: red;
}
</style >
</head>
<body>
<div class="container">
<!-- <div id="red">Test</div> -->
</div>
<script type="text/javascript">
var container = document.getElementsByClassName('container'); // 返回一個數組
var test = document.createElement('p');
test.innerHTML = "HELLO WORLD";
container[0].appendChild(test); // 不能用陣列新增子結點,而必須是單個元素
test.setAttribute('id', 'red');
</script>
</body>
</html>
這是為後面提前設定好佈局,然後動態生成元素做一下鋪墊。
END.