Creating and inserting element -more deep down to DOM

-
There are two ways of creating and inserting element :

  1. HTML string  : 
  • innerHTML ---> ADD render HTML string , not only specfic HTML content but all your content will be replaced , So any previous nodes between the tags and not just direct child , but any descendants will  be entirely will be replaced with HTMl code.

  • Insert adjacentHTML(position, text) ---->  This avoids the extra step of serialization, making it much faster than direct innerHTML manipulation.
  • element.insertAdjacentHTML(position, text);
  • position
    A DOMString representing the position relative to the element; must be one of the following strings:
    • 'beforebegin': Before the element itself.
    • 'afterbegin': Just inside the element, before its first child.
    • 'beforeend': Just inside the element, after its last child.
    • 'afterend': After the element itself.
    ...



Eg:

index.html

<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 4</li>
<li>Item 3</li>
</ul>
</body>


index.js


const list = document.querySelector('ul')
// list.innerHTML = '<li>item 6</li>' // gets all node
unordered list be replaced by item 6



list.innerHTML = list.innerHTML + "<li>item 6</li>" //
this works because it doesn't get replaced but has Downsides

Downsides:

  • all your html contain get rerendered



// use of insertadjacentHTML

<!--before begin-->
<p>
<!--after begin-->
foo
<!--before end-->
</p>
<!--after end -->



const list = document.querySelector('ul')
list.insertAdjacentHTML('afterbegin', '<li>item 0</li>')
// after element ul , but before first child


list.insertAdjacentHTML('afterend', "<div>traversed
unordered list</div>")


downsides : missing direct acess but performance wise is not
an isssue.

















Comments

Post a Comment

Popular posts from this blog

JavaScript — Double Equals vs. Triple Equals - weird things on JavaScript

-
The Problem JavaScript has two  visually  similar, yet  very different , ways to test equality. You can test equality with  ==  or  === . Here are the differences: Triple Equals When using triple equals  ===  in JavaScript, we are testing for  strict  equality. This means both the  type  and the  value  we are comparing have to be the same. Lets look at a couple examples of strict equality. In this first example we’re comparing the  number  5 with the  number  5. As expected,  true  is returned. Both are  numbers , and both share the same  value  of 5. 5 === 5 // true With this in mind, we can look at two more examples that will return  true : 'hello world' === 'hello world' // true (Both Strings , equal values ) true === true // true (Both Booleans , equal values ) Awesome. Now lets take a look at some examples that will return  false : In this example we’ll comp...
Read more

06_Understanding Execution Context and Execution Stack in Javascript

-
Image
Let look inside js engine the things that execute our code and in the end ,it is all about our memory management and execution steps. For this we have two important concept: The heap memory is our long term memory , it is all about memory allocation , stores data in your system and manages access to it. " i mean browser does that , browser manages heap things, browser taps into our system memory and of course   OS , it allocates memory to the browser app. There the data gets stored which we work in our program and most importantly long term data. There is then Stack thing , is end important for execution of code. Stack is kind of short term memory means Stack control over which function is currently executing.                 "  Heap memory  is used by all the parts of the application whereas  stack memory  is used only by one thread of execution. Whenever an object is created, it's always stored  in...
Read more

Creating and inserting element- part-2

-
createElement() : 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 attache...
Read more