aswathy aswathy - 4 months ago 13
jQuery Question

how to add image and text box on a div on click a button

I want image and textbox on click. i use some code but its not proper working



$(function () {
$('.plusicondiv').on('click', function () {


var textBox = document.createElement("input");
$("input").addClass("textbox")
//$("input").addClass("textbox")

$('.rose').append(textBox);

$('.plusicondiv').on('click', function ()
{alert("ss")
var img = document.createElement("IMG");
$("img").addClass("mynasicondiv")
img.src ="vectorimages/pluseicon.svg"
$('.rose').html(img);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




Answer

You need not use two click events and make use of append function to achieve what you want.

$(function () {
    $('.plusicondiv').on('click', function () {
        
        var textBox = '<input type="text" class="textBox"/>';
        
        $('.rose').append(textBox);
        
        
        var img = '<img class="mynasicondiv" src="vectorimages/pluseicon.svg"></img>';

        $('.rose').append(img);
        
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="rose"></div>
<button class="plusicondiv">Add Element</button>