使用 Javascript 动态创建标签答案

【问题标题】：Creating a Label Dynamically using Javascript使用 Javascript 动态创建标签
【发布时间】：2013-06-17 16:01:20
【问题描述】：

我正在使用 Aspnet，我需要为一个特定页面创建数量不定的标签。我有一个按钮，它调用一个使用 javascript 动态生成标签的函数：

<script type="text/javascript">
function create() {
   var newlabel = document.createElement("box1");

           ...

  document.getElementById("MainContent_revenuestreams").appendChild(newlabel);
}
</script>

发生的情况是，创建标签后，他只在网页上显示大约 2-3 秒，然后消失（我认为回发会消除其内容）。

我想知道如何避免这种情况

【问题讨论】：

标签： javascript asp.net label postback pageload

【解决方案1】：

document.createElement(type) - type 必须是 html 标签名称，例如：div、table、p。

在你的情况下：

var newLabel = document.createElement("label");

然后为这个元素设置属性（for - 最重要的标签、id、名称）。

最后：

newLabel.appendChild(document.createTextNode("This is where label caption should be"));
document.getElementById("MainContent_revenuestreams").appendChild(newLabel);

一些链接：

http://www.w3schools.com/jsref/met_document_createelement.asp

http://www.w3schools.com/jsref/met_document_createtextnode.asp

如您所见，box1 不是document.createElement(type) 的有效参数。

【讨论】：

【解决方案2】：

您必须返回 false 才能取消按钮的回发：

<asp:Button runat="server" OnClientClick="javascript: create();return false;"/>

还要注意document.createElement("box1"); 将创建一个<box1></box1> 元素，这可能不是您想要的。您应该将"box1" 更改为"label" 或"span"

【讨论】：

你怎么知道他不是那样做的？主要问题是 document.createElement(...) 被错误的参数调用。
@ElmoVanKielmo 因为他说标签出现在页面上然后消失了。由于他使用按钮创建它，因此回发很可能导致标签消失
@ElmoVanKielmo 另外，<box1></box1> 可能会被浏览器忽略，因此文本会出现。
事实上，它可能会像@Chazz1 所描述的那样出现和消失——我已经看到了。为什么会发生？我想这是来自浏览器引擎的某种人工制品，试图通过传递给document.createElement(...) 的字符串来做一些有用的事情。但是，您的回答也不错，但显然这次不是页面重新加载的问题。所以为你点赞。

【解决方案3】：

添加 OnClientClick="addNewlabel();return false;"

函数 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);

}

【讨论】：