Platzieren Sie Elemente auf (nicht anhängen) das dynamisch erstellte div

Ich verwende JavaScript, um dynamisch eine Zeile zu erstellen. Dann weiß ich nicht, wie man zwei Bälle auf die 1/3 der Länge an den Anfang und 1/3 der Länge bis zum Ende legt. Bitte sehen Sie das Bild unten. Ich möchte, dass zwei Bälle erscheinen, wenn ich in das Eingabefeld Enter drücke. Ich habe versucht, append zu verwenden, aber das hat offensichtlich nicht funktioniert. Der folgende Code ist der HTML-, CSS-, JS-Code. Hoffe jemand könnte mir helfen. Vielen Dank im Voraus.Platzieren Sie Elemente auf (nicht anhängen) das dynamisch erstellte 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); 
}

Quelle

2016-11-23 vkosyj

modifiziert Sie Ihren Code je nach Anforderung.

Keine Notwendigkeit von Div mit Klasse line.
Wenn Sie Bälle an js anhängen möchten, können Sie sie in js einfügen.

Ich hoffe, das hilft Ihnen.

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

Quelle

2016-11-23 05:48:24

Hallo Suresh, danke mir geholfen. Ich entschuldige mich dafür, dass ich die Frage nicht klar genug gestellt habe. Ich möchte, dass zwei Bälle erscheinen, wenn ich in das Eingabefeld Enter drücke. – vkosyj

Oh, ich verstehe. Danke Suresh. – vkosyj

Platzieren Sie Elemente auf (nicht anhängen) das dynamisch erstellte div

Antwort

Verwandte Themen