Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <button id="clr">очистить</button>
  <button id="clc1">.append()</button>
  <button id="clc2">.appendChild( div )</button>
  <button id="clc3">.innerHTML</button>
  <button id="clc4">.push()</button>
  <div id="res"></div>
  <div id="time"></div>
  
  <script>
    $("body").on("click", "#clc1", function() {
      
      var timeS = performance.now();
      var html = "";
      for( var i = 0, count = 0; i < 10; i++){
          html = "";
          for( var line = 0; line < 1000; line++, count++){
              html += "<div>"+count+"</div>";
          }
          $("#res").append( html+" " ); 
      }
      $("#time").append( (performance.now()-timeS)+" ms<br/>" );
      
    }).on("click", "#clc2", function() {
         
      var timeS = performance.now();
      var html = "";
      for( var i = 0, count = 0; i < 10; i++){
          html = "";
          for( var line = 0; line < 1000; line++, count++){
              html += "<div>"+count+"</div>";
          }
          var div = document.createElement('div');
          div.innerHTML = html; 
          var target = document.getElementById( "res" );
          target.appendChild(div);
      }
       $("#time").append( (performance.now()-timeS)+" ms<br/>" );
      
    }).on("click", "#clc3", function() {
      res.innerHTML = "";
      var timeS = performance.now();
      var html = [];
      for( var i = 0, count = 0; i < 10000; i++){
              html.push(`<div>Строка ${i}</div>`);
      }
      document.getElementById( "res" ).innerHTML = html.join(''); 
     $("#time").append( (performance.now()-timeS)+" ms<br/>" );
      
    }).on("click", "#clc4", function() {
         
      var timeS = performance.now();
      const target = document.querySelector('#res');
      const fragment = document.createDocumentFragment();
​
      const data = ((arr) => {
        for( var i = 0, count = 0; i < 10; i++){
              for( var line = 0; line < 1000; line++, count++){
                  arr.push( "<div>"+count+"</div>" );
              }
          }
​
        return arr;
      })([]);
​
      data.forEach((string) => {
        const div = document.createElement('div');
        //div.textContent = string;
        div.innerHTML = string;
        fragment.appendChild(div);
      });
​
      target.appendChild(fragment);
      $("#time").append( (performance.now()-timeS)+" ms<br/>" );
      
    }).on("click", "#clr", function() {
         $("#res").text(""); 
         $("#time").text(""); 
    })
    
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers