Create DOM element trong Javascript [JAVASCRIPT]
Hôm nay ta sẽ học cách tạo thẻ li dùng javascript. Ta có ul sau:
<ul class='list'>
<li class='list-item'>Item 1</li>
<li class='list-item'>Item 2</li>
<li class='list-item'>Item 3</li>
<li class='list-item'>Item 4</li>
</ul>
Bây giờ ta dùng javascript tạo một thẻ li trong ul này.
<ul class='list'>
<li class='list-item'>Item 1</li>
<li class='list-item'>Item 2</li>
<li class='list-item'>Item 3</li>
<li class='list-item'>Item 4</li>
</ul>
<script>
// create element
var li = document.createElement('li');
// add class
li.className = "list-item";
// create text node
var textNode = document.createTextNode('Add new Item');
// append to li
li.appendChild(textNode);
// append li to ul
var ul = document.querySelector('.list');
ul.appendChild(li);
</script>`
Ta thử tìm hiểu đoạn code trên làm gì nhé
var li = document.createElement('li');
// Tạo thẻ <li></li>
li.className = "list-item";
// Thêm class <li class="list-item"></li>
var textNode = document.createTextNode('Add new Item');
// Tạo text "Add new Item"
li.appendChild(textNode);
// Thêm text node vào thẻ li <li class="list-item">Add new Item</li>
var ul = document.querySelector('.list');
// Lấy ra thẻ ul
ul.appendChild(li);
// Thêm <li class="list-item">Add new Item</li> vào trong ul
- Item 1
- Item 2
- Item 3
- Item 4
Như vậy ta đã thêm được thẻ li vào trong ul rồi, nếu giờ ta muốn thêm thẻ a vào li để khi click vào a thì sẽ xoá li khỏi ul. Hiện giờ ta chưa học cách xoá li ra khỏi ul nên ta chỉ cho hiện alert thôi. ta xem ví dụ sau.
<style>
.deleteStyle{
background: lightgray;
color: red ;
font-weight: 600;
border:1px solid black;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
}
</style>
<ul class='list2'>
<li class='list-item2'>Item 1 <a class="deleteStyle" onclick='deleteItem(0)'>X</a></li>
<li class='list-item2'>Item 2 <a class="deleteStyle" onclick='deleteItem(1)'>X</a> </li>
<li class='list-item2'>Item 3 <a class="deleteStyle" onclick='deleteItem(2)'>X</a></li>
<li class='list-item2'>Item 4 <a class="deleteStyle" onclick='deleteItem(3)'>X</a></li>
</ul>
<script>
function deleteItem(id){
alert('delete ' + id);
}
</script>
Ta sẽ dùng javascript tạo li , a và thêm vào ul.
<script>
var li = document.createElement('li');
// Tạo thẻ <li></li>
li.className = "list-item";
// Thêm class <li class="list-item"></li>
var textNode = document.createTextNode('Add new Item ');
// Tạo text "Add new Item "
li.appendChild(textNode);
// Thêm text node vào thẻ li <li class="list-item">Add new Item </li>
var ul = document.querySelector('.list');
// Lấy ra thẻ ul
ul.appendChild(li);
// Thêm <li class="list-item">Add new Item </li> vào trong ul
var a =document.createElement('a');
// tạo link a <a></a>
a.className = 'deleteStyle';
// thêm class <a class="deleteStyle"></a>
a.setAttribute('onclick', 'deleteItem(4)');
// thêm onclick <a class="deleteStyle" onclick="deleteItem(4)"></a>
var aText = document.createTextNode('X');
// tạo text 'X'
a.appendChild(aText);
// thêm text vào <a class="deleteStyle" onclick="deleteItem(4)">X</a>
li.appendChild(a);
// thêm a vào li <li class="list-item">Add new Item <a class="deleteStyle" onclick="deleteItem(4)">X</a></li>
document.querySelector('.list2').appendChild(li);
// thêm li vào ul
</script>
Như vậy là ta đã học cách create element trong javascript rồi đó. Bài viết sau ta sẽ học cách remove element ra khỏi dom dùng javascript. ^_^