My task is to add button dynamically to the div.. here is the code that i follow to add button dynamically but its not working please give me a solution for this
<!DOCTYPE html>
<html>
<head>
<script src=""></script>
<script type="text/javascript">
function test() {
var r = "$('<input/>').attr({
type: "button",
id: "field"
})";
}
$("body").append(r);
</script>
</head>
<body>
<button onclick="test()">Insert after</button>
</body>
</html>
code to append button on div when page loads but its not working
<!DOCTYPE html>
<html>
<head>
<script src="">
</script>
<script>
function test() {
var r=$('<input/>').attr({
type: "button",
id: "field"
});
test().append("#test");
}
</script>
</head>
<body>
<div id="test"></div>
<button id="insertAfterBtn" onclick="test()">Insert after</button>
</body>
</html>
6 Answers
Your append line must be in your test() function
EDIT:
Here are two versions:
Version 1: jQuery listener
$(function(){
$('button').on('click',function(){
var r= $('<input type="button" value="new button"/>');
$("body").append(r);
});
});
Version 2: With a function (like your example)
function createInput(){
var $input = $('<input type="button" value="new button" />');
$input.appendTo($("body"));
}
Note: This one can be done with either .appendTo or with .append.
To add dynamic button on the fly;
<!DOCTYPE html>
<html>
<head>
<script src=""></script>
<script type="text/javascript">
function newButtonClickListener() {
alert("Hello World");
}
function test() {
var r = $('<input/>').attr({
type: "button",
id: "field",
value: "New Button",
onclick: "newButtonClickListener()"
});
$("body").append(r);
}
</script>
</head>
<body>
<button onclick="test()">Insert after</button><br/>
</body>
</html>
the $("body").append(r) statement should be within the test function, also there was misplaced " in the test method
function test() {
var r=$('<input/>').attr({
type: "button",
id: "field",
value: 'new'
});
$("body").append(r);
}
Demo: Fiddle
Update
In that case try a more jQuery-ish solution
<!DOCTYPE html>
<html>
<head>
<script src=""></script>
<script type="text/javascript">
jQuery(function($){
$('#mybutton').one('click', function(){
var r=$('<input/>').attr({
type: "button",
id: "field",
value: 'new'
});
$("body").append(r);
})
})
</script>
</head>
<body>
<button id="mybutton">Insert after</button>
</body>
</html>
Demo: Plunker
Try this:
<script type="text/javascript">
function test()
{
if($('input#field').length==0)
{
$('<input type="button" id="field"/>').appendTo('body');
}
}
</script>
Try this
function test()
{
$("body").append("<input type='button' id='field' />");
}
Working plunk here.
To add the new input just once, use the following code:
$(document).ready(function()
{
$("#insertAfterBtn").one("click", function(e)
{
var r = $('<input/>', { type: "button", id: "field", value: "I'm a button" });
$("body").append(r);
});
});
[... source stripped here ...]
<body>
<button id="insertAfterBtn">Insert after</button>
</body>
[... source stripped here ...]
To make it work in w3 editor, copy/paste the code below into 'source code' section inside w3 editor and then hit 'Submit Code':
<!DOCTYPE html>
<html>
<head>
<script src=""></script>
</head>
<body>
<button id="insertAfterBtn">Insert only one button after</button>
<div class="myClass"></div>
<div id="myId"></div>
</body>
<script type="text/javascript">
$(document).ready(function()
{
// when dom is ready, call this method to add an input to 'body' tag.
addInputTo($("body"));
// when dom is ready, call this method to add an input to a div with class=myClass
addInputTo($(".myClass"));
// when dom is ready, call this method to add an input to a div with id=myId
addInputTo($("#myId"));
$("#insertAfterBtn").one("click", function(e)
{
var r = $('<input/>', { type: "button", id: "field", value: "I'm a button" });
$("body").append(r);
});
});
function addInputTo(container)
{
var inputToAdd = $("<input/>", { type: "button", id: "field", value: "I was added on page load" });
container.append(inputToAdd);
}
</script>
</html>
