Question

我对javascript很陌生。我正在尝试在<body>的顶部添加一个div。但是由于某种原因，它会将我的代码添加为这样的文本

这是我目前的代码。

function addDark() {
  document.body.prepend("<div style='position:fixed;top:0;left:0;z-index:999;background:black;opacity:.9;'></div>")
}

我该如何解决此问题？预先感谢Joris

Answer 1

您需要创建一个html元素作为div。然后，您可以将div附加在body元素内。

function addDark() {
    var div = document.createElement("div");
    // tweak your css for the div here                           
    document.body.prepend(div);
}

Answer 2

根据您要获得网站支持的浏览器，有几种方法。

me in a comment to your question提到的第一种方法当然是手动创建div元素，并附加：
```
var div = document.createElement('div');
div.style.position = 'fixed';
div.style.top = 0;
div.innerText = 'more text';
document.body.prepend(div);
```
当然，上述方式可能需要一段时间才能输入，因此并不是很有趣。这是Node.innerText的文档链接。
然后是Element.innerHTML提到的Vivek。此方法不是可取的，因为它会擦除文档主体以插入元素..除非您以非常特定的方式侦听事件，否则也会擦除它们。我不会采用这种方式，因为它超出了此答案的范围。
最后，还有另一种方法； Element.querySelector()。在插入所需位置之前，可以使用此方法解析以字符串形式编写的HTML。请参考链接文档底部的支持表，以了解目标浏览器是否支持该支持：
```
var span = document.createElement('span');
span.innerHTML = "<div style='position:fixed;top:0;left:0;z-index:999;background:black;opacity:.9;color:white;'>more text</div>";
var div = span.querySelector('div');
document.body.prepend(div);
```

＃3的演示：

var span = document.createElement('span');
span.innerHTML = "<div style='position:fixed;top:0;left:0;z-index:999;background:black;opacity:.9;color:white;'>more text</div>";
var div = span.querySelector('div');
document.body.prepend(div);

Answer 3

我通过这样添加而不是使用“ .innerhtml”来修复它感谢您的所有帮助！

NFLX

javascript innerhtml显示为文本

3 个答案: