如何将变量设置为输入字段的标签？

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。