Question

div-createElement 不起作用？

2015-02-11

3180

javascript jquery html css

我正在尝试使用 javascript 创建 div 标签。但是为什么它不起作用？我见过 document.createElement 不起作用

Javascript createElement() 在 Chrome 中不起作用但这些答案不适合我的脚本。

<html>
<head>
<script>
var div = '<div id = con style="width:auto; height:200px; Background:#2a2a2a">';
var x = document.createElement(div);
var y = document.getElementById('con');
y.innerHTML = "hello world";
document.body.appendChild(x);
</script>
</head>
<body>
</body>
</html>

我该怎么做？

Answer 1

它不能像这样工作。 .createElement() 仅接受您要创建的元素的类型，没有预定义的 HTML 代码段。因此，您必须使用 document.createElement('div'); 创建 Div 元素，然后处理该元素。就像

例如

var div = document.createElement('div');
    div.id = 'con';
    div.style.cssText = "width:auto; height:200px; Background:#2a2a2a";

document.body.appendChild( div );

如果您不需要对 Element 的引用，而只想插入新的 HTML 代码，您也可以使用 Element.prototype.insertAdjacentHTML() ，如下所示

document.body.insertAdjacentHTML( 'beforeend', '<div id="con" style="width:auto; height:200px; Background:#2a2a2a">');

此处代码的另一个问题是您尝试过早访问 DOM。即使代码可以以当前形式运行，您也无法在 <head> 部分中访问 document.body ，因为此时它尚未完全初始化。将整个 <script> 源移至 <body> 部分，或将监听器附加到 DOMContentLoaded 事件。

Answer 2

如果您想一次性插入整个 HTML 结构，您可以使用非常有用、跨浏览器且鲜为人知的 insertAdjacentHTML 方法：

var div = '<div id="con" style="width:auto; height:200px; Background:#2a2a2a"></div>';
document.body.insertAdjacentHTML('beforeend', div);
var y = document.getElementById('con');
y.innerHTML = "hello world";

Answer 3

您无法创建这样的预定义 html，而且由于您要附加到正文，因此脚本应该位于 body 元素内，而不是在 head 中

<html>
    <head>
    </head>
    <body>
        <script>
            var x = document.createElement('div');
            x.id = 'con';
            x.style.width = 'auto';
            x.style.height = '200px';
            x.style.background = '#2a2a2a';
            x.innerHTML = "hello world";
            document.body.appendChild(x);
            //no need to access `y` by id, use the reference returned by createElement to set the content
            //var y = document.getElementById('con');
            //y.innerHTML = "hello world";
        </script>
    </body>
</html>