I'm trying to make divs created with .createElement be draggable. It works fine with divs that are already created like below:

```
 <div>
  This can be dragged around, but outputs cannot?!
</div>

```

but when I create new divs with the function addElement(), it doesn't work.

In more detail here is what my code aims to do:
user inputs text -> clicks input button and the user input(s) are outputted on the screen and can be dragged.

Full code:

```js
function addElement () { 
  var text = document.getElementById("input").value;
  // create a new div element 
  var newDiv = document.createElement("div");  

  // and give it some content 
  var newContent = document.createTextNode(text); 

  // add the text node to the newly created div
  newDiv.appendChild(newContent);  

  // add the newly created element and its content into the DOM 
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 

    document.getElementById("input").value = " ";

}

   $( function() {
  var div = document.getElementsByTagName('div');
    $( div ).draggable();
  } );
```

```css
 div { width: 150px; height: 150px; padding: 0.5em; }
```

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  </head>
  <body>
    <input id="input"type="text" placeholder=" text">
    <button onclick="addElement()" >Input</button>   

    <p>Outputs:</p>
     <script src="script.js"></script>
  </body>

</html>

<div>
  This can be dragged around, but outputs cannot?!
</div>

</body>
</html>
```