Adding a script to a DOM object

Question

I want to add a script that applies to a DOM object of a certain type right after it is loaded/rendered. This type of object always comes together with the javascript script, and I want to put them together within some tag. Is it right to do it as below? If so, I suspect span is not the best tag to be used here because it may interact with the way the element inside will be displayed. What tag should I use?

<span>
  <div>the dom object to be modified by the script</div>
  <script>theJavascriptFunctionThatModifiesTheDomObject()</script>
</span>

For what it's worth, putting a `
` inside a `` is kind-of incorrect, though in practice it probably won't hurt anything. — Pointy, Apr 12 '13 at 12:35
Also, depending on what the script looks like, there could be other problems. It would help if you could be more specific. — Pointy, Apr 12 '13 at 12:37
I think it's fine, but some IE versions used to throw errors when accessing DOM before document is ready. — piotr_cz, Apr 12 '13 at 12:37
@Pointy Actually, I am trying to use [codemirror](http://codemirror.net/doc/manual.html) to alter `textarea`. — sawa, Apr 12 '13 at 12:41
As far as I know, this was an issue of IE6. But I'd use domready event in external javascript file anyway — piotr_cz, Apr 12 '13 at 12:43

score 1 · Answer 1 · edited May 23 '17 at 10:25

I doubt this is the best way to load your script just after a particular element has been loaded by DOM due to these reasons:-

It makes your page load slower.
User will see your complete page in a discrete way.

Instead you should do this:-

Specify a selector to your element.
Include your single javascript code at the end of body.
Update DOM elements using that script.

EDIT: Solution1: Append your JS at the end of body so that it has access to all the DOM elements. Since you are injecting the element in DOM using ajax, you can define a success handler for XHR object which will modify your element in DOM.

Solution2: You can define a separate method in your JS and bind this method on some event. In your HTML markup define a data-event attribute and in your success handler append the element to DOM, extract the data-event using jquery data method and trigger that event.

Atleast it will keep you markup far away from scripting logic.

Some useful Links:

Best practices for speeding up your website - yahoo

Why we should load scripts at end - SO Link

I cannot do this because the relevant DOM is sometimes inserted by ajax. — sawa, Apr 12 '13 at 12:46
@sawa: Especially then you should not use an inline script. It's quite impossible to find the currently active script node… — Bergi, Apr 12 '13 at 12:51

score 0 · Answer 2 · answered Apr 12 '13 at 12:40

0

The problem here is the script tag does not know where it is located in the DOM. It would be better to do something like add a class to the element[s] you want to alter. On DOM ready, you look up the element[s] and do your magic.

answered Apr 12 '13 at 12:40

epascarello

204,599
20
195
236

I cannot do that because the relevant DOM is sometimes inserted by ajax and is sometimes there from the beginning. All the DOMs are referred to by the `id`, so there is no problem with the location. – sawa Apr 12 '13 at 12:42
@sawa there are better ways to do it than including code with every block of HTML you add to the DOM. – Pointy Apr 12 '13 at 12:44
@sawa if there is an id, than what is the problem? Also Ajax calls will be an issue with parsing out the scripts and executing them. – epascarello Apr 12 '13 at 13:12

score 0 · Answer 3 · answered Apr 12 '13 at 12:55

I would avoid this approach; scripts block the page loading – so if you did this after several dom elements the page would run slow (or not at all if errors were found)

Try using jquery onready - example here : http://api.jquery.com/ready/

And scripts [usually] need to go on the bottom of the page to allow the page to load first …there are exceptions to this rule such as the well known modernizer script library that needs to go first so it can evaluate the dom as it loads

Adding a script to a DOM object

3 Answers3