Modifying Content in JavaScript-Generated HTML Code

Question

I am trying to modify the innerHTML of a div when clicked. I have dynamically generated an array of divs, and I want to specifically access the table which the user has clicked.

I have tried dynamically setting the ID of the tables in the JavaScript code:

(for var i=0;i<array.length;i++){
  var IDvalue = "foo";
  // append table to HTML string.
  html += "<div onclick='modifyInnerHTML(\"" + IDvalue + "\")'>...</div>";
  var divs = document.getElementsByTagName('div');
  divs[divs.length-1].id=array[i].IDvalue;
}

Then in modifyInnerHTML() I access the element by ID:

function modifyInnerHTML(id){
  document.getElementById(id).innerHTML+="Add an update";
}

While I think this code should work fine, it is breaking at the document.getElementById(id) function, and I realize the id of the divs is not being set dynamically. Any thoughts on why this might be or are there faster ways to do this?

Thanks in advance!

What do you mean by divs[divs.length-1].id=array[i].IDvalue; This seems wrong to me. — adjan
– adjan, Commented Jun 27, 2014 at 23:15
Could you please describe more precisely the end result you are trying to achieve? — Lucas Trzesniewski
– Lucas Trzesniewski, Commented Jun 27, 2014 at 23:16
I am trying to change the innerHTML of the div the user clicks - fairly simple :) — zdebruine
– zdebruine, Commented Jun 27, 2014 at 23:16
@addy2012 That's for assigning the IDvalue to the last div in the document — zdebruine
– zdebruine, Commented Jun 27, 2014 at 23:17
@wagtail yes, but i did not know that the array[i].IDvalue syntax works. — adjan
– adjan, Commented Jun 27, 2014 at 23:20

Lucas Trzesniewski · Accepted Answer · 2014-06-27 23:22:10Z

1

You'd better use a DOM manipulation library for this, like jQuery.

As for the events, jQuery will let you define them in a much more reliable way. You should avoid defining event handlers in attributes anyway, better attach them to the DOM using references to elements, or, better yet, jQuery elemnt sets.

Case 1: Generate some divs dynamically with an event handler already set:

for(var i = 0; i < 10; ++i) {
    $("<div>")
        .addClass("clickable-div")
        .html("click me!")
        .on("click", function() {
            $(this).html("You clicked me!");
        })
        .appendTo("body");
}

Case 2: Add an event handler to all divs that contain the class clickable-div

$("div.clickable-div").on("click", function() {
    $(this).html("You clicked me!");
});

jQuery is much faster to get things done with than anything you'd write in pure JS.

edited Jun 27, 2014 at 23:22

answered Jun 27, 2014 at 23:13

Lucas Trzesniewski

51.6k11 gold badges115 silver badges169 bronze badges

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

4 Comments

zdebruine Over a year ago

OK, is there any faster way to use jQuery than what I've used (or tried to use) in JavaScript?

Lucas Trzesniewski Over a year ago

Yes, I'll try to figure out what you really wanted to do here and translate it to jQuery.

zdebruine Over a year ago

Nice, I think I have seen this before! I'll implement it!!

Lucas Trzesniewski Over a year ago

Take the time to read the docs thouroughly. It will save you massive amounts of time later on.

Collectives™ on Stack Overflow

Modifying Content in JavaScript-Generated HTML Code

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related