javascript - 如何在准备好时隐藏动态创建的 div？

Question

我有一个需要动态创建 div 的场景，因此我创建了就绪文档。但它应该在选择时显示。我面临的问题是，在页面加载时，创建了空的 div。所以我需要隐藏那个 div 并且应该在选择文本时显示。

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 += '˟';
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;
});

这是我的 plunker

问题如下图所示:

Answer 1

在将 DIV 附加到 HTML 之前隐藏它

replaceDiv.style.display = "none";

并且我建议在您通过

更新文本后显示它

replaceDiv.style.display = " block ";