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.
- Item 1
- Item 2
- Item 3
- Item 4
Replace element trong javascript đơn giản phải không nào ? ^_^