Replace DOM element trong Javascript [JAVASCRIPT]

Hôm nay ta sẽ học cách replace một element trong DOM. Ví dụ ta có một ul sau:

<ul id='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>

Nếu ta muốn replace element đầu tiên là "Item 1" với nội dung mới là "Update Item 1" ta làm như sau

<script>
  // create new element
  const newLi = document.createElement('li');
  // add class
  newLi.className = "list-item";
  // add text node
  newLi.appendChild(document.createTextNode('Update Item 1'));
  // get ul 
  var ul  = document.getElementById('list');
  // get all li 
  var listItems =document.getElementsByClassName('list-item');
  // replace first li with newLi
  ul.replaceChild(newLi, listItems[0])

</script>

Ta dùng phương thức replaceChild() để replace li mới.

Demo

Replace element trong javascript đơn giản phải không nào ? ^_^