如何將變量設置爲輸入字段的標籤？

Question

這裏是我的樣品輸入字段：

<div class="md-form form-sm"> 
    <input type="text" id="form1" class="form-control"> 
    <label for="form1" class="">Example label</label> 
</div> 

如果我想設置標籤作爲變量，所以我可以更新。我會怎麼做？請記住，我是JS和Jquery的新手，這些是我目前使用的唯一工具。我沒有使用任何其他框架，並且除非絕對必要，否則不希望在此時使用。

Answer 1

我想感謝大家的答案。就像我說的，我是JS新手，我很感謝所有的幫助。最後我做這個：

爲我所用的輸入：

<div class="md-form form-sm"> 
    <input type="text" id="blueCartQty" maxlength="2" class="form- 
     control"> 
    <label for="blueCartQty" id="blueInputLabel" class=""></label> 
</div> 

而且把我的變量，我把這個在我的JS文件中的標籤：

$("#blueInputLabel").html(cart.blueQty); 

cart.blueQty得到在一個函數中更新，我希望它始終顯示當前值。

Answer 2

您正在尋找一個動態的somesort模板框架。我用Underscore.js，它有模板的功能，能夠完成任務：

http://underscorejs.org/#template

Answer 3

> from: <label for="form1" class="">Example label</label> 
> ˀ 
> to: 
<label for="form1" class=""><div id="mylabel">Example 
label</div></label> 

<script> 
    content = "this is my variable text"; 
    document.getElementById("mylabel").innerHTML = content; 
</script> 

Answer 4

爲此，您可以使用純JS/jQuery的。

首先，創建一個鏈接到DOM元素的變量（假設你給它一個類的label）：

var test = $(".label")[0]; 

然後，您可以簡單地改變其innerHTML字段的值來改變內的文本：

test.innerHTML = "test"; 

因此，完整的代碼將是這樣的：

var test; 
 

 
window.onload = function() { 
 
    test = $(".label")[0]; 
 
    
 
    //At any other point in your code when you would want to change it 
 
    test.innerHTML = "Another label"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="md-form form-sm"> 
 
    <input type="text" id="form1" class="form-control"> 
 
    <label for="form1" class="label">Example label</label> 
 
</div>

我不相信有更好的方法（即通過設置一個變量而不是一個屬性），而不是使用另一個框架 - 比如其他框架提到的underscore.js。