Thiết lập giá trị của một hộp văn bản tự động tạo ra với jQuery

Question

Sử dụng đoạn mã sau

var newDiv = $(document.createElement("div")); 
var newTextBox; 

newTextBox = $(document.createElement("input")) 
    .attr("type", "text") 
    .attr("id", "textbox") 
    .attr("name", "textbox"); 

newTextBox.val("text"); 
newDiv.append(newTextBox); 
alert(newDiv.html()); 

tôi nhận được sau

<input name="textbox" id="textbox" type="text"> 

tôi nhận được điều tương tự với

$("#textbox").val("test"); 

Sử dụng

newTextBox = $("<input/>"); 

Không giúp được

Giá trị của tôi ở đâu?

EDIT: SOLTUION

Vì vậy, tiếp tục lên trong ngăn xếp tôi đã chuyển đổi DOM tôi đã xây dựng thành một chuỗi và vì - như nhai cần chú ý - giá trị động không được thêm vào thẻ, nó không xuất hiện.

Thanks for the help

Answer 1

jQuery sẽ không đưa giá trị vào các yếu tố tạo của tạo html. Cả hai .attr('value', 'blah') và .val() nhận giá trị hiện tại của những gì được nhập hoặc thay đổi trong đầu vào văn bản và cho phép bạn thấy giá trị đó khi bạn xem đầu vào trên trang hoặc gửi đến máy chủ. Tuy nhiên, bạn sẽ không nhìn thấy nó khi nhìn vào html.

Bạn vẫn có thể thao tác các giá trị tất cả các bạn muốn, bạn chỉ sẽ không thấy bất kỳ thay đổi trong con đom đóm, như bạn làm với những thay đổi lớp, phong cách, vv

AFAIK, điều này là như nhau mà không sử dụng jQuery. Điều tương tự cũng xảy ra với:

document.getElementById('textbox').value = 'my text'; 

Thuộc tính giá trị chỉ để đặt giá trị của một cái gì đó từ máy chủ. Nó không cần thiết với javascript.

Ngoài ra, tùy thuộc vào loại đầu vào bạn đang sử dụng. Ví dụ, bạn sẽ thấy các thay đổi thuộc tính value với một đầu vào ẩn, nhưng không phải với hộp văn bản.

EDIT:

Bằng cách thêm newDiv vào phần thân, hộp văn bản và giá trị hiển thị bằng mã của bạn. Here's a test page. Bạn có thể thấy cả mã và bản xem trước những gì sẽ xảy ra. Mặc dù cảnh báo không hiển thị bất kỳ thuộc tính 'giá trị' nào vì các lý do được giải thích ở trên.

Answer 2

var newDiv = $(document.createElement("div")); 

var newTextBox = $('<input />') 
    .attr("type", "text") 
    .attr("id", "textbox") 
    .attr("name", "textbox") 
    .val("my text"); // <-- You can use here... 

newTextBox.val("my text"); // <-- or here 
newDiv.append(newTextBox); 
alert(newDiv.html()); 

Answer 3

Với một hack ít bạn có thể làm điều đó ..

var newDiv = $('<div/>'); 
var newTextBox; 

newTextBox = $('<input/>') 
    .attr("type", "hidden") 
    .attr("id", "textbox") 
    .attr("name", "textbox"); 

newTextBox.val("text"); 
newDiv.append(newTextBox); 
newTextBox.each(function(){this.type='text';}); 
alert(newDiv.html()); 

1st xác định loại của nó như là ẩn, vì điều này sẽ cho phép các thuộc tính giá trị, và sau đó sử dụng nó thay đổi mã văn bản ..

Answer 4

$("#element")[0].setAttribute("value","newvalue"); 

Answer 5

Người ta cũng có thể làm được điều này

var chip = document.createElement("div"); chip.innerHTML="some value here" card.appendChild(chip)