ダイナミックテキストボックスのすぐ下にdivを追加する必要があります

Question

Name: <input type="text" id='name'/> 
<!-- Here I want to create div when myFunction() is called --> 

<button onclick="myFunction()">Submit</button> 

<script> 
function myFunction() { 

    var ele = document.createElement("div"); 
    ele.setAttribute("id","timedrpact"); 
    ele.innerHTML="fffffffffff"; 
    document.getElementById("name").appendChild(ele); 

} 

</script> 

このJavaScriptコードでは何も間違っています。

Answer 1

あなたはjQueryのを使用することができます。入力後にdivが必要な場合。

<script> 
    function myFunction(){ 
     $("#name").after('<div id="timedrpact">fffffffffff</div>'); 

    } 
</script> 

Answer 2

appendChildは、子供を親に入れることを意味し、<input type="text"><div></div></input>は無効です。

代わりにdivをテキスト入力の後に置くことを意味すると思いますので、最も簡単な解決策は、入力の後に要素を作成し、この要素にdivを追加することです。

HTML：

Name: <input type="text" id='name'/> 
<span id='afterName'></span> 

<button onclick="myFunction()">Submit</button> 

Javascriptを：

function myFunction() { 

    var ele = document.createElement("div"); 
    ele.setAttribute("id","timedrpact"); 
    ele.innerHTML="fffffffffff"; 
    document.getElementById("afterName").appendChild(ele); 

}