Javascript create element Image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript create element Image</title>
    <style>

     div {
        padding: 5px;
        width: 500px;
        border: 5px solid red;
        margin: auto;
    }

       .title {
        margin: 0;
        text-align: center;
        font-family: verdana;
        font-weight: 900;
        font-size: 30px;
       }

      #pic {
        width: 100%;
    }


</style>
</head>
<body>

      <div id='box'></div>


  <script>
    txt = 'IMAGE';

    image = document.createElement('img');
    sub = document.createElement('p');
    sub.className = 'title';
    box.appendChild(image);
    box.appendChild(sub);
    image.id = 'pic';
    sub.innerHTML = txt;
    image.title = 'Javascript create element image';
    image.className = 'img';
    image.src = 'https://1xpto.netlify.app/pics/blue.jpg';


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