動的に作成されたdivに要素を追加する（追加しない）

JavaScriptを使用して線を動的に作成します。それから最初の1/3の長さと2番目の長さの1/3の位置に2つのボールを置く方法はわかりません。下の画像をご覧ください。 入力ボックスでEnterを押すと2つのボールが表示されます。私は追加を使用しようとしましたが、これはうまくいきませんでした。以下のコードは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

ただ要件ごとにあなたのコードを変更しました。

lineでdivを必要としません。
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を押すと、2つのボールが表示されます。 – vkosyj

ありがとうございます。ありがとうございます。 – vkosyj

動的に作成されたdivに要素を追加する（追加しない）

答えて

関連する問題