通过javascript创建div框_Javascript_Html_Css

通过javascript创建div框

javascript html css

通过javascript创建div框,javascript,html,css,Javascript,Html,Css,我正在尝试此代码，但它不起作用。请帮助。在这里，我只想创建一个div块并更改其属性 <html> <head> <script > function create() { l=document.createElement('div'); l.id='10'; l.style.position='absolute'; l.style.top='100px'; l.style.left='200px'; l.style.height='100px'; l.styl

我正在尝试此代码，但它不起作用。请帮助。在这里，我只想创建一个div块并更改其属性

<html>
<head>
<script >
function create()
{
l=document.createElement('div');
l.id='10';
l.style.position='absolute';
l.style.top='100px';
l.style.left='200px';
l.style.height='100px';
l.style.width='100px';
l.style.backgroundColor='yellow';
l.style.zIndex='100';
}
</script>
</head>
<body>
<input type="submit" name="cssandcreate" id="cssandcreate" value="css"  onclick="create()"/>
</body>
</html>


函数create（）
{
l=document.createElement（'div'）；
l、 id='10'；
l、 style.position='absolute'；
l、 style.top='100px'；
l、 style.left='200px'；
l、 样式。高度='100px'；
l、 样式宽度='100px'；
l、 风格。背景颜色='黄色'；
l、 style.zIndex='100'；
}

您不能只创建元素并等待它出现，还应该将其添加到DOM中

例如：

document.body.appendChild(l);

试试这样的

 function createDiv() {
        var divTag = document.createElement("div");
        divTag.id = "div1";
        divTag.className = "divdrag";

        par = document.getElementById('stage'); 

        par.insertBefore(divTag, par.firstChild);
    }

    createDiv();

CSS

.divdrag{
          width:688px;
          position:relative;
          margin-top:20px;
          display:inline-block;
          height:50px;
            border: 1px solid red;

         }
        .divdrag:hover{
        -webkit-box-shadow: 1px 1px 3px #999;
        box-shadow: 1px 1px 3px #999;
        border:0.7px dotted;
            }

看看fiddle

HTML

<input type="button" name="cssandcreate" id="cssandcreate" value="css"  onclick="create()"/>

应该是

document.body.appendChild（l）@user2828274:您成功了吗？“它不工作”不算作错误描述。发生了什么事？@JanDvorak什么事也没有发生，OP显然在试图向DOM添加对象。@Jonathan我知道了，但询问者应该告诉我们。我们不应该被要求去猜。也许除了逻辑错误，我们还漏掉了一个打字错误？
function create() {
    var l = document.createElement('div');
    l.id = '10';
    l.style.position = 'absolute';
    l.style.top = '100px';
    l.style.left = '200px';
    l.style.height = '100px';
    l.style.width = '100px';
    l.style.backgroundColor = 'yellow';
    l.style.zIndex = '100';
    document.body.appendChild(l);
}