How to use html inside jquery or java script

Question

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");
});
});

you can create a new element in jquery by simply passing it the html: var el = jQuery('<div>this is a new new element</div>'); jQuery('#analysis').append(el) — Ward D.S.
– Ward D.S., Commented Aug 4, 2015 at 6:50
sorry the image link for the buttons is this one. I apologize for the bad link imgur.com/uQDjbAf — noob
– noob, Commented Aug 4, 2015 at 6:53
@WardD.S. can you please show me a demo i am new to javascript and jquery — noob
– noob, Commented Aug 4, 2015 at 6:54
I would go with sahil's answer stackoverflow.com/a/31802638/1969960, simply create the box beforehand and give it display: none in css. When your button is clicked simply give it display: block, his jsfiddle illustrates it. — Ward D.S.
– Ward D.S., Commented Aug 4, 2015 at 7:02

sahil gupta · Accepted Answer · 2015-08-04 07:02:42Z

1

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

edited Aug 4, 2015 at 7:02

answered Aug 4, 2015 at 6:56

sahil gupta

2,34914 silver badges14 bronze badges

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

1 Comment

noob Over a year ago

@sameera i tried your method but it dosen't show me the options. I also tried to look for erroe in console no error displayed there too.

Sameera Thilakasiri · Accepted Answer · 2015-08-04 07:03:31Z

0

$(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.

edited Aug 4, 2015 at 7:03

answered Aug 4, 2015 at 6:58

Sameera Thilakasiri

9,51810 gold badges54 silver badges87 bronze badges

2 Comments

noob Over a year ago

i used it but it creates multiple options means every time i click the button. i just want it to come once.

Sameera Thilakasiri Over a year ago

Then you have to use a flag to keep it in memory.

Collectives™ on Stack Overflow

How to use html inside jquery or java script

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related