Is it possible to edit html generated by javascript with more javascript?

Question

I need to use a javascript file that is server generated and which creates some html. But I am not happy with the html it creates. I fixed most of this in CSS, but the last problem is that the hrefs point to the wrong place. Is there any way to change these hrefs? I tried putting some scripting after the original call, but it did not work:

<script type="text/javascript" src="http://widget.seekandfind.com/publications?id=dd15fc98d1a83f5e1bcecf3f378a1269c00de96f"></script>
<script type="text/javascript">
var element = document.getElementsByClassName('saf-links')[1].getElementsByTagName('a')[0];
element.setAttribute("href","index.htm");
</script>

Thank you for any suggestions.

williambq · Accepted Answer · 2014-02-07 22:41:06Z

1

It is most likely your JS is firing before the other JS has fully written to the DOM.

You probably need to use a listener (like using the jQuery doTimeout plugin with a loop, or if you are not using jQuery, making your own with a setTimeout() closure/loop) that waits until the HTML elements are ready to be addressed.

Test for an element you know should exist from the called script result and then proceed to modify it once it is available.

answered Feb 7, 2014 at 22:41

williambq

1,1257 silver badges12 bronze badges

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

3 Comments

williambq Over a year ago

@dandavis: I don't think you can reliably have an onload listener in this case as the DOM may be ready and the widget script is 'loaded' but it may still be running and adding its bit to the DOM for some addtional amount of time. So it could take several milliseconds to seconds more if it does a lot of processing to modify the DOM. THEN you want to modify its additional elements once that script has completed its processing.

user3285762 Over a year ago

setTimeout does work, except that if I set it too low, the other code has not run, but if I set it too high, the links are wrong until a couple seconds after page load. I set it to 500 and it works for me, but I worry that the experience might be wrong for other users.

williambq Over a year ago

You need to put the setTimeout in a closure loop that recursively checks every 100ms or so for the existence of some final element that is generated by the called javascript file. Once the element is found 'true' to exist, you exit the loop and call/run your code. This way, regardless of how long the experience is for a given user/browser, your code will execute as soon as the elements are available.

Collectives™ on Stack Overflow

Is it possible to edit html generated by javascript with more javascript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related