Javascript 如何添加div并使其像开发人员控制台一样工作？

我想使用JS在页面上动态创建一个div，并让它像Chrome和Firefox中的开发人员控制台一样工作。我的意思是，当div可见时，它不会对其他DOM元素的显示产生负面影响。它只是简单地在页面上“向上推”或“向下推”元素

不必重新设计应用程序的DOM元素来解释“div控制台”，这是可能的吗

我尝试将div生成为页面上的第一个元素，但这仍然不能解释绝对位置或固定位置的DOM元素

  div = document.createElement('div');
  div.id = 'wc-test-window';
  div.style.width = "100%";
  div.style.height = "200px";
  div.style.backgroundColor = '#eee';
  div.style.position = 'relative';
  div.style.top = 0;
  div.style.right = 0;
  div.style.display = 'none';

  document.body.insertBefore(div, document.body.firstChild);

---

我对这个社区的所有非建设性评论和对一个完全合法的问题的否决票感到失望。无论如何，我用框架集和框架解决了这个问题，任何人都在寻找这个问题的可行答案

  function showDevConsole() {

    var fs = document.createElement('frameset'),
      f1 = document.createElement('frame'),
      f2 = document.createElement('frame');
    fs.rows = "200,*";
    fs.framespacing = "0";

    // top frame - show the dev console
    f1.name = "topframe";
    f1.src = "dev-console.html";
    f1.marginwidth = "0";
    f1.marginheight = "0";
    f1.noresize = "noresize";
    f1.scrolling = "no";

    // bottom frame - show current page
    f2.name = "bottomframe";
    f2.src = window.location;
    f2.marginwidth = "0";
    f2.marginheight = "0";
    f2.scrolling = "auto";
    f2.frameborder = "0";

    // append the frames to the frameset
    fs.appendChild(f1);
    fs.appendChild(f2);

    // replace the entire body with the framset containing both frames
    $("body").replaceWith(fs);

    return false;

  }

---

我把当前页面放在底部框架上，把“控制台”放在顶部。顶部框架可以在底部框架上执行的任何DOM操作都将使用框架的名称或id通过JS完成。

一切皆有可能<代码>：）@Ele有可能吗？真不敢相信我在这件事上投了反对票。我想创建一个div，它的行为类似于任何web应用程序上的web控制台。这意味着目标web应用程序不必仅仅为了适应div web控制台而修改其DOM。当然，如果要修改目标应用程序，以使div控制台适合并按需要运行，则可以这样做，但这不是我要问的。我应该能够否决你的非建设性评论。@Learnonhardway可能不会：-拥有该声誉号码的人应该熟悉本网站的规则。你的意思是问一个有效的问题，发布我迄今为止尝试的代码示例，解释我想要实现的目标，在寻求帮助之前解释我难以克服的障碍？难怪这么多人发现这个网站有毒。