Question: I have a scenario where I need to create a div dynamically, so I created on-ready of document. But it should be displayed on-selection. I am facing the issue, that on page load, the empty div is created. So I need to hide that div and should be shown on-select of text.

### JavaScript

```
$(document).ready(function () {
closePopUp();
var replaceDiv = document.createElement('div');
replaceDiv.id = 'rplceTxtDiv';
document.getElementsByTagName('body')[0].appendChild(replaceDiv);
var innerspan = document.createElement('span');
replaceDiv.appendChild(innerspan);
innerspan.innerHTML += '&#735;';
var innerDiv = document.createElement('div');
replaceDiv.appendChild(innerDiv);
innerspan.addEventListener("click", closePopUp, false);
replaceDiv.addEventListener("click", getSel, false);
var rplceTxtDiv = $('#rplceTxtDiv');
$('#mytextarea').on('select', function (e) {
    var txtarea = document.getElementById("mytextarea");
    var start = txtarea.selectionStart;
    var finish = txtarea.selectionEnd;
    rplceTxtDiv.offset(getCursorXY(txtarea, start, 20)).show();
    rplceTxtDiv.find('div').text('replace with stars');
}).on('input', function () {
    if (interval) {
        interval = false;
        edits.push($(this).val());
        if (edits.length > maxHistorySize) edits.shift();
        setTimeout(() => interval = true, saveInterval);
    }
});
document.onkeydown = undo;
});

```

Here is my [plunker](https://plnkr.co/edit/6KmwCZZDddYgBdNLVJHB?p=preview)

The issue is shown in below image:

[![enter image description here](https://i.stack.imgur.com/BsFYj.png)](https://i.stack.imgur.com/BsFYj.png)

Answer: 
Hide the DIV before appending it to the HTML by

`replaceDiv.style.display = "none";`

and I recommend showing it after you have updated the text by 

`replaceDiv.style.display = "block";`
just hide all div having class name "yourclass" with `hide()`

like this on ready

```
$('div.yourclass').css("display","none");

```