CODEWITHSUNDEEP
javascript
Kostis
Kostis

Reputation: 119

Adding events and functions on elements generated with createElement()

I created different elements-paragraphs with createElement()/createTextNode() and added them to the body.

My problem is that i want to make those divs links or be able to add events such as onclick and obviously there is no HTML code to do that..just javascript generated objects.

my code atm:

for (i=0; i<10; i++){
   var newDiv = document.createElement("div");
   newDiv.className = "block";
    var heading = document.createElement("h2");
    var newContent = document.createTextNode(data[1][i]);
    heading.className="title";
    heading.appendChild(newContent);
    newDiv.appendChild(heading);
    var paragraph = document.createElement("p");
    var newContent2 = document.createTextNode(data[2][i]);
    paragraph.className="light";
    paragraph.appendChild(newContent2);
    newDiv.appendChild(paragraph);

    var currentDiv = document.getElementById("div1"); 
   document.body.insertBefore(newDiv, currentDiv);


  }

Upvotes: 1

Views: 4702

Answers (3)

caramba
caramba

Reputation: 22490

You can add the event listener to the object you just created. The object does not have to be HTML. Read more about adding event listeners and see simple example:

var someDiv = document.createElement('div');
var txt = document.createTextNode('click me');
someDiv.append(txt);
document.body.append(someDiv);

var myFancyFunction = function() {
    alert('you clicked me');
};

someDiv.addEventListener('click', myFancyFunction);

Update after your code you can add an event listener to those objects you create on the fly. You can also add different functions on the same event. In this case it's the same function for both elements/objects .. play with this: (I changed the data to "dummy data" as there was no data)

var myClick = function(event) {
    alert(event.target.innerHTML);
};

for (i=0; i<10; i++){
  var newDiv = document.createElement("div");
  newDiv.className = "block";
  var heading = document.createElement("h2");
  var newContent = document.createTextNode('dummy data1 index: ' + i);
  heading.className="title";
  heading.appendChild(newContent);
  newDiv.appendChild(heading);
  var paragraph = document.createElement("p");
  var newContent2 = document.createTextNode('dummy data2 index: ' + i);
  paragraph.className="light";
  paragraph.appendChild(newContent2);
  newDiv.appendChild(paragraph);

  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv);

  heading.addEventListener('click', myClick);
  paragraph.addEventListener('click', myClick);

}

Upvotes: 1

Matthew Johnson
Matthew Johnson

Reputation: 5165

Once an element is added to the dom, you can select it just like any other element.

// Create the element
var paragraph = document.createElement('p');

// Give it an `id`
paragraph.id = 'foo';

// Add the element to the `dom`
document.body.appendChild(paragraph);

// Add the listener
paragraph.addEventListener('click', function() {
    this.innerHTML = 'It was clicked';
});
p {
  height:20px;
  padding:10px;
  outline:1px solid #bada55;
}

In the example above, I added an id. If for some reason you need to re-select the element it may make it easier.

Upvotes: 0

JJWesterkamp
JJWesterkamp

Reputation: 7916

You can simply call addEventListener on the JS-generated objects, even before they are inserted into the DOM, or are never inserted at all:

let div = document.createElement('div');

div.addEventListener('click', function(event) {
    // do something
});

// This will trigger a call of the registered click callback,
// regardless of whether the div is in the DOM:
div.dispatchEvent(new Event('click', {
    "bubbles": true,
    "cancelable": false,
}));

// To add it to the DOM, simply add it the way you wish:
document.body.appendChild(div);

Upvotes: 0

Related Questions