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

Demo

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>

Demo

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. ^_^