javascript - 使用 Javascript 动态创建标签

Question

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

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

           ...

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

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

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

Answer 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).

Answer 2

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

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

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

Answer 3

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

功能添加新标签（）{

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

}