I'm struggling to find the correct syntax for adding a button via javascript/jquery that has a function attached.

Right now I am trying:

list.append("<button onclick='getFeed('.rss, showFeedResults')'>ButtonTest</button>");

But it returns:

<button onclick="getFeed(" http:="" open.live.bbc.co.uk="" weather="" feeds="" en="" pa2="" 3dayforecast.rss,="" showfeedresults')'="">ButtonTest</button>

Essentially, I want to be able to create

<button onclick="getFeed('.rss', showFeedResults)" class="ui-btn-hidden">

In javascript, But can't figure out how..`

And I seem to be having trouble wrapping my head around creating html elements that use both single and double qoutation marks.

Any advice would be greatly appreciated.

I'm struggling to find the correct syntax for adding a button via javascript/jquery that has a function attached.

Right now I am trying:

list.append("<button onclick='getFeed('http://open.live.bbc.co.uk/weather/feeds/en/PA2/3dayforecast.rss, showFeedResults')'>ButtonTest</button>");

But it returns:

<button onclick="getFeed(" http:="" open.live.bbc.co.uk="" weather="" feeds="" en="" pa2="" 3dayforecast.rss,="" showfeedresults')'="">ButtonTest</button>

Essentially, I want to be able to create

<button onclick="getFeed('http://open.live.bbc.co.uk/weather/feeds/en/B1/3dayforecast.rss', showFeedResults)" class="ui-btn-hidden">

In javascript, But can't figure out how..`

And I seem to be having trouble wrapping my head around creating html elements that use both single and double qoutation marks.

Any advice would be greatly appreciated.

• javascript
• jquery
• button

• The following answers are better solution, but your problem can be solved by using escaped quote like this var text = "aaa\"bb"; – Zdeněk Mlčoch Commented Apr 23, 2013 at 19:30

4 Answers 4

Append a button with click event listener assigned

Using pure JavaScript

const NewEL = (tag, prop) => Object.assign(document.createElement(tag), prop);

// Use like:
const EL_btn = NewEL("button", {
  textContent: "Test button",
  onclick() { console.log(this); /* getFeed etc... */ },
});

document.body.append(EL_btn);

Or using the jQuery library

http://api.jquery.com/on/

list.append("<button>ButtonTest</button>");

list.on("click", "button", function(){
    getFeed('http://open.live.bbc.co.uk/weather/feeds/en/PA2/3dayforecast.rss, showFeedResults');
});

For dynamically generated elements use .on() method like above.

While I think using an on handler on the entire list is better, it's also perfectly acceptable to just bind events to disconnected DOM elements before adding them to the DOM:

button = $("<button>Button Test</button>");

button.click(function () {
  getFeed('http://open.live.bbc.co.uk/weather/feeds/en/PA2/3dayforecast.rss, showFeedResults');
});

list.append(button);

Something like this in vanilla javascript

<div id="something"></div>

var something = document.getElementById("something");
var button = document.createElement("button");

function doSomething() {
    alert("hi");
}

button.id = "myButton";
button.textContent = "Click me";
button.addEventListener("click", doSomething, false);

something.appendChild(button);

on jsfiddle

Also, inline javascript:
i.e. <button onclick="getFeed()">
is considered bad practice and can cause a number of unexpected issues.

First create the element using the DOM APIs:

var button = document.createElement('button');

Next, set its attributes:

button.addEventListener('click', function (e) {...});
button.appendChild(document.createTextNode('Button Test'));

Finally, add it to the document:

someParentElement.appendChild(button);