Creating a Label Dynamically using Javascript

Question

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:

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

I would like to know how can i avoid this

ElmoVanKielmo · Accepted Answer · 2013-06-17 16:07:40Z

7

document.createElement(type) - type must be a html tag name like: 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).

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_createtextnode.asp

As you see box1 is not a valid argument for document.createElement(type).

answered Jun 17, 2013 at 16:07

ElmoVanKielmo

11.4k2 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nmat · Accepted Answer · 2013-06-17 16:13:30Z

1

You have to return false to cancel the postback of the button:

<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"

edited Jun 17, 2013 at 16:13

answered Jun 17, 2013 at 16:08

nmat

7,6316 gold badges32 silver badges43 bronze badges

4 Comments

ElmoVanKielmo Over a year ago

How do you know if he doesn't do it that way? The main problem is that document.createElement(...) is called with wrong argument.

nmat Over a year ago

@ElmoVanKielmo because he says that the label appears on the page and then it disappears. Since he is creating it with a button it is very likely that the postback causes the label to disappear

nmat Over a year ago

@ElmoVanKielmo Also, <box1></box1> will probably be ignored by the browser so the text will appear.

ElmoVanKielmo Over a year ago

In fact it might appear and disappear as described by @Chazz1 - I've seen that. Why it happens? I guess it's some kind of artifact from browser engine trying to do something useful with string passed to document.createElement(...). However, your answer is also good, but apparently it wasn't the problem with page reload this time. So upvote for you.

Sandip Wavhal · Accepted Answer · 2013-06-17 17:13:53Z

0

Add OnClientClick="addNewlabel();return false;"

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

}

answered Jun 17, 2013 at 17:13

Sandip Wavhal

243 bronze badges

Collectives™ on Stack Overflow

Creating a Label Dynamically using Javascript

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related