将元素放置在（不附加）动态创建的div上

我使用JavaScript来动态创建一行。然后我不知道如何将两个球放在三分之一的长度上以及三分之一的长度到最后。请看下面的图片。 当我在输入框中按回车键时，我想要两个球出现。我试图使用append，但显然这没有奏效。下面的代码是html，css，js代码。希望有人能帮助我。先谢谢你。将元素放置在（不附加）动态创建的div上

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <link type="text/css" rel="stylesheet" href="code.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="code_js.js"></script> 
</head> 
<body> 
    <div id = "output"> 

    </div> 

    <div id = "user"> 
     <input type="text" id="input"><br><br> 
    </div> 

</body> 
</html>

CSS：

.deco { 
    border-bottom: 1px solid black; 
    width: 120px; 
    margin-left:0px; 
    margin-bottom:10px; 
    z-index: 2; 
    position: relative; 
    display: block; 
    margin-right: 20px; 
} 


#output { 
    width: 300px; 
    height: 200px; 
    position:absolute; 
    float:left; 
} 

.line { 
    width: 125px; 
    height: 80px; 
    float:left; 
    margin-right: 20px; 
} 

#user { 
    position:relative; 
    z-index:99; 
    top:50px; 
} 

#ball{ 
    width: 10px; 
    height: 10px; 
    background: #000000; 
    border: 2px solid #ccc; 
    border-radius: 50%; 
}

JS：

$(document).ready(function() { 
    make(); 
    $("#input").keyup(function(event){ 
     if(event.keyCode == 13){ 
      //$('#hr1').css("border-bottom-color", "red"); 
      /*how to put the ball on the line*/ 
     } 
    }); 
}); 

function make() { 
    var one = document.createElement('div'); 
    one.className = "line"; 
    var hr = document.createElement('hr'); 
    hr.className = "deco"; 
    hr.id = "hr" + 1; 
    one.append(hr); 
    $('#output').append(one); 
}

来源

2016-11-23 vkosyj

只是修改你的代码按要求。

不需要div line。
如果你想从js追加球，你可以将它们包含在js中。

我希望这可以帮助你。

$(document).ready(function() { 
 
    make(); 
 
    $("#input").keyup(function(event){ 
 
     if(event.keyCode == 13){ 
 
      $('#hr1').css("border-bottom-color", "red"); 
 
      $('.ball').css("display", "inline-block"); 
 
     } 
 
    }); 
 
}); 
 

 
function make() { 
 
    var hr = document.createElement('hr'); 
 
    hr.className = "deco"; 
 
    hr.id = "hr" + 1; 
 
    $('#output').prepend(hr); 
 
}

.deco { 
 
    border-bottom: 1px solid black; 
 
    width: 100%; 
 
    margin-left:0px; 
 
    margin-bottom:10px; 
 
    z-index: 2; 
 
    position: relative; 
 
    display: block; 
 
    margin-right: 20px; 
 
} 
 

 

 
#output { 
 
    position: relative; 
 
    width: 125px; 
 
} 
 

 

 
#user { 
 
    position:relative; 
 
    z-index:99; 
 
    top:50px; 
 
} 
 

 
.ball{ 
 
    display: none; 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #000000; 
 
    border: 2px solid #ccc; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: -5px; 
 
    z-index: 100; 
 
} 
 
.first-ball { 
 
    left: calc(33.3% - 10px); 
 
} 
 
.second-ball { 
 
    right: calc(33.3% - 10px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div id = "output"> 
 
     <div class="ball first-ball"></div> 
 
     <div class="ball second-ball"></div> 
 
</div> 
 

 
<div id = "user"> 
 
    <input type="text" id="input"><br><br> 
 
</div>

来源

2016-11-23 05:48:24

嗨苏雷什，谢谢你对我的帮助。我很抱歉没有把问题弄清楚。当我在输入框中按Enter键时，我想要显示两个球。 – vkosyj

哦，我明白了。谢谢苏雷什。 – vkosyj

将元素放置在（不附加）动态创建的div上

回答

相关问题