Javascriptでテキストボックスを動的に追加するにはどうすればよいですか？

デフォルトでは、5つのテキストボックスがあります。ユーザーがボタンをクリックすると、1つのテキストボックスを追加する必要があります。Javascriptでテキストボックスを動的に追加するにはどうすればよいですか？

どうすればいいですか？

2009-09-07 noob

ボタンのonclickにイベントを添付すると、divの可視性がinlineに設定されることをお勧めします。これは、柔軟性と堅牢性を考慮して、私が見ることができる最良の方法です。

look hereがコード例です。

2009-09-07 17:35:58

<script> 
function add() 
{ 
    document.getElementById("place").innerHTML="<input type='text' value=''>" 
} 
</script> 
<input type="button" value="clickMe" onClick="add();"> 
<div id="place"></div>

出典

2009-09-07 17:36:16

誰でもこれに投票して、innerHTMLを使用することの影響を認識していません。 –

-1

あなたがinnerHTMLプロパティを交換する場合は、以前に入力した値がそれを避けるために、クリアされます、あなたはプログラムで入力要素を追加することができ、この

<html> 
<head> 
<title>Dynamic Form</title> 
<script language="javascript" type="text/javascript" > 
function changeIt() 
{ 

createTextbox.innerHTML = createTextbox.innerHTML +"<br><input type='text' name='mytext' >" 

} 
</script> 
</head> 
<body> 

<form name="form"> 
<input type="button" value="clickHere" onClick="changeIt()"> 
<div id="createTextbox"></div> 
</form> 
</body> 
</html>

出典

2009-09-07 17:38:33 anishMarokey

誰でもこれに投票し、innerHTMLを使用することの影響を認識していません。 –

-1。単純な 'appendChild（）'がうまく動作するときに 'innerHTML'を実行すると、不必要に遅くなり、' i'変数で何が起こっていますか？変数が 'innerHTML'文字列に展開されていないので、HTMLは' name = 'mytext'となり、ブラウザが理解できないガベージが続きます。 –

innerHTMLへの書き込みは十分です。 + = innerHTMLでは常に間違いです。 – bobince

を試してみてください。

var input = document.createElement('input'); 
input.type = "text"; 
//...  
container.appendChild(input);

チェックthis例。事前に定義されたテキストボックスのいずれかに

出典

2009-09-07 17:41:30 CMS

正解 - innerHTMLは指定されたHTML要素の内容を新しく定義されたinnerHTML値で置き換えるためです。 –

<script> 
function add() 
{ 
    var inpt = document.getElementById('input_template'); 
    inpt.parentNode.appendChild(inpt.cloneNode(false)); 
} 
</script> 

<input type="button" onclick="add();">

セットID = input_template

出典

2009-09-07 17:43:02 w35l3y

私はそれをインラインではなく別の機能にしていましたが、スタイルを同じに保つためにCSSを使用しましたが、これは巧妙なやり方のように思えます。 –

FYI：よりよい書式設定は誰にとっても役立ちます。 –

JavaScript関数

function add() { 

//Create an input type dynamically. 
var element = document.createElement("input"); 

//Create Labels 
var label = document.createElement("Label"); 
label.innerHTML = "New Label";  

//Assign different attributes to the element. 
element.setAttribute("type", "text"); 
element.setAttribute("value", ""); 
element.setAttribute("name", "Test Name"); 
element.setAttribute("style", "width:200px"); 

label.setAttribute("style", "font-weight:normal"); 

// 'foobar' is the div id, where new fields are to be added 
var foo = document.getElementById("fooBar"); 

//Append the element in page (in span). 
foo.appendChild(label); 
foo.appendChild(element); 
}

HTML部分、

<button id="button" value="Add" onClick:"javascript:add();">

とは、そのやりました！

出典

2012-11-27 08:00:34

ここで、テキストボックスの属性を設定できます。 CSSのプロパティ、値、IDなど –

<!DOCTYPE html> 
<html> 
<body> 
<h1>My First Web Page</h1> 
<p>My first paragraph.</p> 
<button type="button" onclick="myFunction()">Click me!</button> 
<script> 
var count =0; 
function myFunction() { 
count++ 
    document.write('Lable1'); 
    document.write('<input type="text" name="one+count">'); 
    document.write('Lable2'); 
    document.write('<input type="text" name="two+count">'); 

    document.write('Lable3'); 
    document.write('<input type="text" name="three+count">'); 

    document.write('Lable4'); 
    document.write('<input type="text" name="four+count">'); 

    document.write(count); 

    } 
    </script> 

    </body> 
    </html>

出典

2015-06-18 17:19:51 vatsal

Javascriptでテキストボックスを動的に追加するにはどうすればよいですか？

答えて

関連する問題