jquery - adding html

<!DOCTYPE html>
<html>
  <head>
    <script src="assets/jquery-3.7.1.js"></script>
    <script src="assets/jquery-1.12.4.min.js"></script>
    <script>
      var jq112 = $.noConflict();
    </script>
    <style>
    #str1, #str2{
        margin-bottom:10px;border:1px solid black;padding:5px;
    }
    </style>
  </head>
  <body>
    <div id='str1'>Body untuk JQUERY</div>
    <div id='str2'>Body untuk NATIVE</div>

<script>

jq112(document).ready(function() {
    jq112('<a>jQuery site</a>').attr('href', 'http://www.jquery.com/?p=112')
    .appendTo('body');
    jq112('<div>add text to jquery</div>').attr('info', 'only text')
    .appendTo('#str1');
});

//append direct
document.getElementById('str2').innerHTML += '<div>add text to native</div>';

//append using element
newElement = document.createElement('div');
newElement.textContent = 'add text to native (2)';
newElement.setAttribute('info', 'only text');

document.getElementById('str2').appendChild(newElement);


</script>
  </body>
</html>