使用 Javascript 动态创建标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17151907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a Label Dynamically using Javascript
提问by Chazz1
I am using Aspnet, and i need to create an undetermined number of labels for one specific page. I have a button that calls a function which generates a label dynamically using javascript:
我正在使用 Aspnet，我需要为一个特定页面创建数量不确定的标签。我有一个按钮调用一个函数，该函数使用 javascript 动态生成一个标签：
<script type="text/javascript"> function create() { var newlabel = document.createElement("box1"); ... document.getElementById("MainContent_revenuestreams").appendChild(newlabel); } </script>
<script type="text/javascript"> function create() { var newlabel = document.createElement("box1"); ... document.getElementById("MainContent_revenuestreams").appendChild(newlabel); } </script>
What happens is that after the label is created he only shows on the webpage for about 2-3 seconds and after that it disapears (i think that the postback eliminates its content).
发生的情况是，在创建标签后，他只在网页上显示大约 2-3 秒，然后它就消失了（我认为回发消除了其内容）。
I would like to know how can i avoid this
我想知道如何避免这种情况
回答by ElmoVanKielmo
document.createElement(type)- typemust be a html tag name like: div, table, p.
document.createElement(type)-type必须是 html 标签名称，如：div、table、p。
In your case:
在你的情况下：
var newLabel = document.createElement("label");
Then you set attributes for this element (for- most important in label, id, name).
然后为该元素设置属性（for- 最重要的标签、id、名称）。
Finally:
最后：
newLabel.appendChild(document.createTextNode("This is where label caption should be"));
document.getElementById("MainContent_revenuestreams").appendChild(newLabel);
Some links:
一些链接：
http://www.w3schools.com/jsref/met_document_createelement.asp
http://www.w3schools.com/jsref/met_document_createelement.asp
http://www.w3schools.com/jsref/met_document_createtextnode.asp
http://www.w3schools.com/jsref/met_document_createtextnode.asp
As you see box1is not a valid argument for document.createElement(type).
如您所见，box1这不是 的有效参数document.createElement(type)。
回答by nmat
You have to return false to cancel the postback of the button:
您必须返回 false 才能取消按钮的回发：
<asp:Button runat="server" OnClientClick="javascript: create();return false;"/>
Also note that document.createElement("box1");will create a <box1></box1>element which is probably not what you want. You should change "box1"to "label"or "span"
另请注意，这document.createElement("box1");将创建一个<box1></box1>可能不是您想要的元素。你应该"box1"改为"label"或"span"
回答by Sandip Wavhal
Add OnClientClick="addNewlabel();return false;"
添加 OnClientClick="addNewlabel();return false;"
function addNewlabel() {
函数 addNewlabel() {
var NumOfRow++;
var mainDiv=document.getElementById('MainDiv');
var newDiv=document.createElement('div');
newDiv.setAttribute('id','innerDiv'+NumOfRow);
var newSpan=document.createElement('span');
newSpan.innerHTML="Your Label Name";
// append the span
newDiv.appendChild(newSpan);
mainDiv.appendChild(newDiv);
}
}
