Javascript'te metin kutularını dinamik olarak nasıl ekleyebilirim?

0

Düğmeniniçin bir görünürlük ayarlayacağı, düğmenin onclick numaralı anahtarına bir olay eklemek iyi olur. Bu, esneklik ve sağlamlık göz önünde bulundurularak, bunun için görebileceğim en iyi yoldur.

Örneğin, bir kod için look here var.

kaynak

2009-09-07 17:35:58

1

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

kaynak

2009-09-07 17:36:16

+1

Bunun için kim oy kullandıysa, innerHTML kullanmanın etkisinin farkında değil. –

-1

o önlemek amacıyla, innerHTML değiştirin bu

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

kaynak

2009-09-07 17:38:33 anishMarokey

+1

Bunun için kim oy kullandı, innerHTML kullanmanın etkisinin farkında değil. –

+0

-1. Basit bir "appendChild()" nin çalışması gerektiğinde "innerHTML" ile ilgili olarak arama yapmak gereksiz bir şekilde yavaştır ve "i" değişkeninizle neler oluyor? Değişken, 'innerHTML' dizesinde genişlemediği için bile kullanılmaz, böylece HTML'niz 'name = 'mytext' olur ve onu tarayıcının anlayamadığı çöpler alır. –

+0

İçerideki bir kereHTML'ye yazmak yeterince adil; + = innerHTML her zaman bir hatadır. – bobince

20

, önceden girilen değerler silinir deneyin, programlı giriş öğeleri ekleyebilirsiniz:

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

Kontrolü this örnek. Önceden tanımlanmış metin kutularının birine

kaynak

2009-09-07 17:41:30 CMS

+1

Doğru cevap - çünkü innerHTML belirtilen HTML öğesinin içeriğini yeni tanımlanmış innerHTML değeriyle değiştirecektir. –

1

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

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

set id = input_template

kaynak

2009-09-07 17:43:02 w35l3y

+1

Satır yerine ayrı bir işlev yapmış olurdum ve stilleri aynı tutmak için CSS kullanırdım, ancak bunu yapmak için akıllıca bir yol gibi görünüyor ve işe yarayacak gibi görünüyor. –

+0

FYI: Daha iyi biçimlendirme herkese yardımcı olur. –

9

JavaScript Fonksiyon

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 kısmı

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

Ve Onun bitmiş!

kaynak

2012-11-27 08:00:34

+0

Burada, metin kutusu için öznitelikleri ayarlayabilirsiniz. css özellikleri, değerler, kimlik vb. –

0

<!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>

kaynak

2015-06-18 17:19:51 vatsal

Javascript'te metin kutularını dinamik olarak nasıl ekleyebilirim?

cevap

İlgili konular