Javascript div-createElement不工作？_Javascript_Jquery_Html_Css

Javascript div-createElement不工作？

javascript jquery html css

Javascript div-createElement不工作？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试使用javascript创建div标记。？但为什么它不起作用呢？我已经看过了但这些答案不适合我的剧本 <html> <head> <script> var div = '<div id = con style="width:auto; height:200px; Background:#2a2a2a">'; var x = document.createElement(div); var y = document.getElemen

我正在尝试使用javascript创建

div

标记。？但为什么它不起作用呢？我已经看过了

但这些答案不适合我的剧本

<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>


var div=''；
var x=document.createElement（div）；
var y=document.getElementById（'con'）；
y、 innerHTML=“你好世界”；
文件.正文.附件（x）；

我怎么做呢？

它不是这样工作的

.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 );

如果您不需要对元素的引用，并且只想插入新的HTML代码，那么也可以这样使用
document.body.insertAdjacentHTML（'beforeend'，''；

这里代码的另一个问题是，您试图过早地访问DOM。即使代码以当前形式工作，您也无法访问
部分中的document.body
，因为此时它尚未完全初始化。要么将整个
源代码移动到
部分，要么将侦听器附加到事件。
您不能像这样创建预定义的html，而且因为您要附加到body，脚本应该在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>


var x=document.createElement（'div'）；
x、 id='con'；
x、 style.width='auto'；
x、 style.height='200px'；
x、 style.background='#2a2a2a'；
x、 innerHTML=“你好世界”；
文件.正文.附件（x）；
//不需要通过id访问'y'，使用createElement返回的引用来设置内容
//var y=document.getElementById（'con'）；
//y、 innerHTML=“你好世界”；
如果您想一次插入整个HTML结构，可以使用非常有用的跨浏览器和不公平的鲜为人知的方法：
var div=''；
document.body.insertAdjacentHTML（'beforeed'，div）；
var y=document.getElementById（'con'）；
y、 innerHTML=“你好世界”；
您忘了将div
括在引号中：createElement（'div'）
应该是：var div='
您只是忘了引用id.@antyrat我叫var div=
这是正确的答案。对于纯JS，您需要在使用标记名创建元素后手动定义属性。如果您想从HTML代码段创建元素，请使用jQuery或类似的工具。@user3384402应该是这样的，那边有什么问题吗？@jAndy我使用您的代码并额外添加了var he=document.getElementById（'con'）；he.innerHTML=（“你好世界”）然后我运行它，但不给出结果。@user3384402我更新了答案。您的代码中还有一些问题需要解决。谢谢您的回答。在内部，这是完美的运行。但是我需要把它放进盒子里。当你把这段代码放在头上时，我正在尝试它，但它不起作用，当它执行时，还没有
标记。因此，为了让它在头部工作，您需要将它包装在window.onload
事件中：window.onload=function（）{/*code in answer*/}。
<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>

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";