Commit 31c8370

committed

JS-DOM(replace element)

1 parent c3a0b8b commit 31c8370Copy full SHA for 31c8370

File tree

+23

-4

lines changed

+23

-4

lines changed

Lines changed: 22 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -98,8 +98,27 @@ li.setAttribute('title', 'new item')`
`98`	`98`	`// ### add innerHTML ###`
`99`	`99`	`li.innerHTML = '<a href="/" class="btn btn-danger btn-sm delete-item">x</a>';`
`100`	`100`
`101`		`-// Create append text node`
	`101`	`+// ### Create append text node ###`
`102`	`102`	`li.appendChild(document.createTextNode("This New Text"))`
`103`	`103`
`104`		`-// execution new element`
`105`		`-document.querySelector('ul.list-group').appendChild(li);`
	`104`	`+// ### execution new element ###`
	`105`	`+document.querySelector('ul.list-group').appendChild(li);`
	`106`	`+`
	`107`	`+// ## Replace Element ##`
	`108`	`+`
	`109`	`+// Create element`
	`110`	`+const newHeading = document.createElement('h3');`
	`111`	`+`
	`112`	`+// Add id`
	`113`	`+newHeading.id = 'task-title';`
	`114`	`+`
	`115`	`+// New Text Node`
	`116`	`+newHeading.appendChild(document.createTextNode('Task List'));`
	`117`	`+`
	`118`	`+// get old element`
	`119`	`+const oldHeading = document.getElementById('card-title');`
	`120`	`+// get parent`
	`121`	`+const cardHeader = document.querySelector('.card-header');`
	`122`	`+`
	`123`	`+// Replace`
	`124`	`+cardHeader.replaceChild(newHeading, oldHeading);`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@`
`20`	`20`	`<div class="col-md-12">`
`21`	`21`	`<div class="card">`
`22`	`22`	`<div class="card-header" id="task-title">`
`23`		`- Task List`
	`23`	`+ <h5id="card-title">Task</h5>`
`24`	`24`	`</div>`
`25`	`25`	`<div class="card-body">`
`26`	`26`	`<form id="form-task">`

Comments

(0)