0

I want to change the text inside a div with javascript (jQuery is ok too).
There are a few to do that: 

element.innerText  
element.innerHTML  
element.textContent  
$(element).text()  
$(element).html()

But when I use the above methods, the whole document is affected and not only the div.
See chrome timeline below which refers to this fiddle

Is there a way to update the text inside the div without affecting the whole document?

enter image description here enter image description here

Sharon Haim Pour
  • 6,595
  • 12
  • 42
  • 64
  • 1
    Can you show us the HTML and the JavaScript code that is creating this error instead of just a screenshot? Maybe update the `fiddle` you linked with an example of recreating your error, because the statement `$("#3").html(timestamp);` is correct and *should* work fine, so I suspect the error is coming from somewhere else. – Nick Zuber Nov 30 '15 at 15:41
  • @NickZ - There's a fiddle link in the question which works. The question is about efficiency and not about working code. – Sharon Haim Pour Nov 30 '15 at 16:07
  • Your fiddle doesn't have any javascript for me. – Ben Lorantfy Nov 30 '15 at 16:13
  • @MrBurger - Fixed it. Please try again. – Sharon Haim Pour Nov 30 '15 at 16:16
  • The scope is always going to be the entire document because for JQuery to *find* the element you're referencing, it must check the *entire* document to look for it. Even if you try to minimize the scope of that by checking only within a certain container, the entire document must be checked to find that container. I don't think it's possible to update a value without the scope being the entire document. Also, you say "Is there a way to update the text inside the div without affecting the whole document?" however it's not *affecting* the entire document, that's simply referring to its scope. – Nick Zuber Nov 30 '15 at 16:20

2 Answers2

0

Because updating the text affects the width/height of the element and the flow of the page, the entire document usually has to be laid out again whenever the DOM changes. However, you can do stuff so only part of the document needs to be re-laid out.

From http://wilsonpage.co.uk/introducing-layout-boundaries/

To be a layout boundary, the element must:

  • Be an SVG root (<svg>).
  • Be a text or search <input> field.

or:

  • Not be display inline or inline-block
  • Not have a percentage height value.
  • Not have an implicit or auto height value.
  • Not have an implicit or auto width value.
  • Have an explicit overflow value (scroll, auto or hidden).
  • Not be a descendant of a table element.

If you make the element you're updating a layout boundry, only the part of the document inside your element needs to be updated. However, keep in mind were talking about optimizations of less than a millisecond, and pre-mature optimizations are generally considered bad practice.

Community
  • 1
  • 1
Ben Lorantfy
  • 963
  • 1
  • 7
  • 19
0

Note: Do not start an id attribute with a number. It may cause problems in some browsers.

http://www.w3schools.com/jquery/sel_id.asp

David Auvray
  • 288
  • 1
  • 3
  • 20