Creating and inserting element- part-2
createElement() :
before,after, replace with()
- creating a new array and appending to end of node
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Arrays & Iterables</title>
<script src="app.js" defer></script>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 4</li>
<li>Item 3</li>
</ul>
<script>
const list = document.querySelector('ul')
const newLi = document.createElement('li')
// it just create a <Li> element
// but still not attached with unordered list
//solutions :appendchild()
list.appendChild(newLi); // but where is the content
// solutions
newLi.textContent = 'item 5'
</script>
</body>
</html>
output
- item 1
- item 2
- item 3
- item 4
- item 5
Prepend(): add element to the beginning to the list
const list = document.querySelector('ul')
const newLi = document.createElement('li')
// it just create a <Li> element
// but still not attached with unordered list
//solutions :
list.prepend(newLi); // but where is the content.
// solutions
newLi.textContent = 'item 5'
// append vs appendchild : not only it adds new element but also text
nodes(acceptd node object or DOm string) but with appendchild only node object
// multiples node can be added, seperated by commas
const list = document.querySelector('ul')
const newLi = document.createElement('li')
// it just create a <Li> element
// but still not attached with unordered list
//solutions :
list.append(newLi, 'some other content!!!'); // added to new element to
the first but where is the content.
// solutions
newLi.textContent = 'item 5'
const list = document.querySelector('ul')
const newLi = document.createElement('li')
// it just create a <Li> element
// but still not attached with unordered list
//solutions :
// list.lastElementChild.before(newLi) // added to new element to the first but where is the content.
list.firstElementChild.replaceWith(newLi);
newLi.textContent = 'item6'
implications :
// to add the element after second element or in between
const li = document.querySelector('ul')
const secondli = li.children[1]
const newli = document.createElement('li')
newli.textContent = 'some content here!'
secondli.after(newli);
output :
- Item 1
- Item 2
- some content here!
- Item 3
- Item 4
there is not efficient method as support on safari is not yet
there is another method called insertAdjacentElement()
syntax :
insertAdjacentElement(position, text)
To copy an element:
newli.CloneNode(False) : by default only element but not nested element
are cloned
newli.CloneNode(True) : all nested element
are cloned
// Removing element
const list = document.querySelector('li')
// list.remove();
// or
list.parentElement.removeChild(list); // reaching out parent element then add remove
Comments
Post a Comment