CODEWITHSUNDEEP
javascriptjqueryhtml
noob
noob

Reputation: 1

How to use html inside jquery or java script

So i have a set of these buttons. https://i.sstatic.net/839MH.png

On clicking the 4th bolt i want to call a select menu option like this.

My desired result is this on clicking the button is https://i.sstatic.net/d6XIj.jpg

I want to know how to embed this html code in jquery or java script so that i can call it by onclick/click function. Below is my jquery code and html for the button.

Html code for my button

<img id="analysis" class="normal_button" src="buttons/analysis.png">

jquery code for button

jQuery(document).ready(function(){
jQuery("#analysis").click(function(){
alert("hello world");
});
});

Upvotes: 0

Views: 1408

Answers (2)

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9508

$(document).ready(function(){
   $("#analysis").click(function(){
     var eles = '<select><option>1</option><option>2</option><option>3</option></select>';
     $('#domchange').append(eles);
   });
});
<div id="domchange"></div>

append is used to insert. Working fiddle

http://api.jquery.com/appendto/ refer this too fyi.

Upvotes: 0

sahil gupta
sahil gupta

Reputation: 2349

You can use css for this rather than embedding html in Jquery.

Please refer https://jsfiddle.net/qen76fep/1/

Explanation: You can use display property in css by first setting the display property of the select box to none and then on click on the button you can use the display property to 'block'.

For reference: http://www.w3schools.com/cssref/pr_class_display.asp

To have toggling effect on button click you can use toggle() function in Jquery.

Example: jQuery('.selectbox').toggle();

For reference: "http://api.jquery.com/toggle/"

Upvotes: 1

Related Questions