如何在javascript中一起创建带有图片和标题的按钮

Question

Hi i want to create a button which has caption (ex Category) and the Image of it in the Button too.

so we can say that button has both Caption + Image

I hav to use javascript only

Answer 1

This creates button with javascript and put lable "Category" to it.

var btn = document.CreateElement("input");
btn.setAttribute("type", "button");
btn.setAttribute("value", "Category");

var frm = document.forms[0];
frm.appendChild(btn);

You can't have Text + Image to button as far as i know, either you can have text or image. You can specify an image for it like this though:

var btn = document.CreateElement("input");
btn.setAttribute("type", "button");
btn.setAttribute("value", "Category");
btn.style.backgroundImage = "url(path)"; // for image

var frm = document.forms[0];
frm.appendChild(btn);

....

Other Possibility:

If you want to apply Text + Image, then you should create an image containing both of these and specify that as background for the button.

Update:

If you set padding on the button to account for the width of the background image and set the background image to no-repeat you can have both.

Suggested By Andrew in the comments below, thanks