Добавление некоторого html к тегу body с добавлением, но идентификатор html не выполняется

Question

Я добавил html к тегу body с помощью append. Но когда я ставлю runOCR(url), все функции перестают работать. Как выйти из этой проблемы.

Вот мой код:

function body(){
  if (window.location.hostname.match(/www.w3schools.com/)){

   var large = '<div class="form-group"> \
   <input type="text" id="url" placeholder="Image URL" />\
     <div id="ocr_status"> </div>\
     <div>\
        <label>Filed1:</label>\
           <textarea id="text1" ></textarea>\
     </div>\

     </div>' ;


    $('body').append(large);

     $(".form-group").css({
     position: "fixed",
    top: "20px",
    right: "180px",
    'border-radius': '25px',
    'border': '2px solid #73AD21',
     'padding': '20px', 
      'background': 'blue',

       "font-size": "1.5em",
       "z-index": "1000",

          });

     function runOCR(url) {
  Tesseract.recognize(url)
  .then(function(result) {
  document.getElementById("text1")
  .innerHTML = result.text;
  document.getElementById('text1').focus();

  }).progress(function(result) {
  document.getElementById("ocr_status")
  .innerText = result["status"] + " (" +
  (result["progress"] * 100) + "%)";
  });
  }
  document.getElementById("url")
  .addEventListener("input", function(e) {
  var url = document.getElementById("url").value;
  runOCR(url);