將元素放置在（不附加）動態創建的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上

回答

相關問題