how to inject controls using javascript at runtime for a web page?

Question

I am planning to inject three buttons in the web pages I have been given(Development is done and only URL'S are shared) and upon clicking on each one of those buttons , I need to do certain actions.

Can anyone share how I can do this using JavaScript.Any link which can help me start with creating buttons, and code behind for clicks on buttons and how do I load that JavaScript in browser etc.

Answer 1

Add elements at runtime append()

Suppose you have,

<div id="container"> <div>

And you have to inject buttons into this.

$('#container').append('<input type="button" id="b1" value="Button1" /><input type="button" id="b2" value="Button2" /><input type="button" id="b3" value="Button3" />');

Where, #container is a selector for <div> with ID - container.

For click(),

$('#b1').click(function(){
    //do your action
}

Don't forget to add reference to jQuery

Sample Demo.

Answer 2

Check this:

Best way of creating a new element in jquery

Once created, you can use Bind to attach the functionality you need for each button.

Answer 3

I usually use the jquery append function.

$('#TheContainingElement').append('<input type="button" id="MyButtonID" value="Click Me" />');

Once you've created it you can wire the click events

$('#MyButtonID').click(function(){
  // do something
});