There's one thing I want to do with javascript, but don't know how. In a perfect world it would look like this:
<p>My very cool page!</p>
<script type="text/javascript">
document.write('<div>some content</div>');
</script>
And this script would insert <div>some content</div>
right before (or after, or instead of) script tag. But in the real world, document.write
starts writing html anew, removing any static content in the page (<p>
tag, in thi开发者_开发问答s case).
This is simplified example, but should give you the idea. I know that I can statically put <div id="some_id"></div>
before script tag and insert html in it from js, but I wanna be able to use multiple instances of this snippet without changing it (generating random id manually) each time.
I'm ok to use jquery or any other existing library as well. Is there any way to achieve this? Thanks!
We are actually in that perfect world...
and your example would work as it is ..
http://www.jsfiddle.net/BtKGV/
Yes, but you always add or write it in relation to something else.
If you wanted to write something AFTER the first p tag, in jQuery, you could do something liek this
$('p:first').after( '<div>some content</div>' );
If you look at jQuery's API you will see they have many functions for this, such as before
, after
, append
, etc.
You also might want to read about adding and removing elements to/from the DOM, such as in this article:
http://www.dustindiaz.com/add-remove-elements-reprise/
look up appendChild()
To close the question, here's how it has worked out in the end.
The trick was to store each widget's data in html tag, not in javascript. User inserts content like this
<div class="my_widget" feed_id="123"></div>
...
<div class="my_widget" feed_id="456"></div>
User also links script from our server. When page's loaded, script does $('div.my_widget').each
and populates contents of each widget depending on its feed_id
and other attributes.
Thanks to everyone (and +1 to Gaby and Kerry for attempts to help with such vague problem)
精彩评论