使用Javascript注入HTML

Question

I have to inject the following line of html to a document through javascript:

<button type='button'>btnName </button>

In addition to this, I have to register an onclick to the button where the function to be invoked expects an arg say 'arg' so the javascript looks something like this:

var html = "<button type='button' onclick='+ fnName +
    "(the param shld go here)'>" + btnName + "</button>"

How do I achieve this? One obvious solution is to assign an Id to the button and then register a click function later on once the html is appended to the document. But I dont want to do this because there are too many buttons. Is there another option that you can think of.

Addition: The function name is dynamic, and the 'arg' that goes in is also dynamic. An Id if at all is required has to be autogenerated.

**

I've got the solution, please see below

**

Answer 1

I would recommend jquery.

Something like

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script>
$(document).append(
  $("input")
  .attr("type", "button")
  .click(function(){
    doSomething()
  ))
);
</script>

Answer 2

You should avoid using onclick as an HTML attribute. Instead, create the button programmatically through the DOM interface and attach the event as a property.

var button       = document.createElement("button");
button.type      = "button";
button.innerHTML = btnName;
button.onclick   = function() {
    window[fnName](data);
};

// Insert the button into whatever container node you are populating
someContainerNode.appendChild(button);

Or the jQuery way since that's where the band wagon is going:

$("<button type='button'>" + btnName + "</button>").click(function() {
    window[fnName](data);
}).appendTo(someContainerNode);

Also, since you are not setting the onclick handler as a string, you will not need to convert your function argument data to a JSON string, which will improve performance.

Answer 3

Since you don't want to assign an onclick method the usual ways, a round about way would be to have them all call a function with a unique identifying number. The function will have a two dimensional array that has the argument, this is assuming every button calls the same function with a different parameter.

Edit: I may have misunderstood, here is some code not using jQuery that I used in a recent project.

for(var place = 0; place < 5; place++)
        {
            if(document.getElementById('title_'+ place).addEventListener)//this is for compatablity
                document.getElementById('title_'+ place).addEventListener('click', function(e){/*some code*/});
            else if(document.getElementById('title_'+ place).attachEvent)
                document.getElementById('title_'+ place).attachEvent('onclick',  function(e){/*some code*/});
            else
                document.getElementById('title_'+ place) = function(e){/*some code*/};
        }

The code adds an onClick event to five objects, and since it checks which method works in the current browser, it supports the main browsers (as far as I have tested).

I took out some code for readability but that was just the code in the functions that would be called.

Answer 4

you can use document.write for that variable. var html = document.write('' + btnName + ''). Please correct the single and double quotes. I dont know this is useful for you or not

Answer 5

if you dont want to bind an event to each individual button, you can bind one event to a parent of all those buttons (eg, the parent div holding the buttons for example), and then use event bubbling to achieve a similar effect.

eg

<div id="parent">   
   <button id="b0">text</button>
   <button id="b1">text</button>
   <button id="b2">text</button>
   <button id="b3">text</button>
   <button id="b4">text</button>
   <button id="b5">text</button>
</div>
<script>
   $("#parent").click(function(e){
       if ($(e.target).attr("id") === "b0") {
          // do b0's stuff
       } else if ($(e.target).attr("id") === "b1") {
          //do b1's stuff 
       } //etc 
   });
</script>

another way to do it is to use jquery live events - they are essentially doing what i have written above (more elegantly of course). As for the arguments, how do you obtain the arguments in the first place? without knowing that, i cant really tell you the best way forward.

Answer 6

我已经解决了：-

var html = "<button type='button' onclick='"+ fnName +"("+ JSON.stringify(data) +")'>"+ btnName + "</button>"