0

I'm requesting DOM-elements .my-element which come rendered from server and append 'em on my page.

Every time new element appears on the page I want to call JS-function myFunction.
I want to call this function "automatically" without using excess JS-code.

That's how I do it now. Every rendered element contains tag script with function call inside:

<div class="my-element">
    /*some structure*/
    <script>myFunction();</script>
</div>

But I wonder: is there some HTML-attribute who could do the same? Some like that:

<div class="my-element" javascript="myFunction();">/*some structure*/</div>

UPD
I don' want to call myFunction with the code which appending new items. I want to solve this task exactly using tag script or some magic attribute.

  • What does the JS do? Couldn't the same task be executed on the server-side? – Teemu Mar 28 '18 at 13:53
  • @Teemu no, `myFunction` can't be executed on server –  Mar 28 '18 at 13:54
  • Can you hook myFunction with the code that is pulling the new elements from the server? – Doug Mar 28 '18 at 13:55
  • @Doug that's the point: I don want to :) –  Mar 28 '18 at 13:56
  • How is the element appended? Can't the JS be run there rather than adding lots of identical script tags to the page? Edit: Why would you not want to do it the way Doug suggests? If you give us some context we may be in a better position to help. – DBS Mar 28 '18 at 13:57
  • 3
    There's no such an attribute. Put a single script at the end of the body, collect all the elements with `my-element` class, loop the collection and call the function passing an element in the loop. – Teemu Mar 28 '18 at 13:57
  • html does not run javascript (it just provides a place for it to load) -- that's why you'll have folks say that HTML isn't a programming language but more a structural language. If you wanted to pull this off, you'd probably have to create extra javascript to listen for when an element is appended to the DOM and then (evaluate and) execute the JS included. – Doug Mar 28 '18 at 14:00
  • See the answer at this question https://stackoverflow.com/questions/7692730/dom-mutation-event-in-jquery-or-vanilla-javascript maybe that works for you. – Dariel Ramos Díaz de Villegas Mar 28 '18 at 14:01
  • 1
    JS is not scoped to the HTML element it is nested in, so the markup you suggested actually makes very little sense. Why do you *not* want to invoke `myFunction()` with the call that appends new items? That is actually the correct way to do it. – Terry Mar 28 '18 at 14:03
  • After your edit it looks like you're creating the elements dynamically using JS. The creation function is definitely a correct place to execute some code related to the added elements. Or you can use [Mutation Observers](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) ... – Teemu Mar 28 '18 at 14:04

1 Answers1

-2

Perhaps using something like getElementsByClassName which returns a live collection of DOM elements with your class my-element. Then you can watch for changes in the collection and run your function when necessary.

Kyle Lussier
  • 112
  • 1
  • 2