write html content from javascript

Question

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 this 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!

Answer 1

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.

Answer 2

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/

Answer 3

look up appendChild()

Answer 4

We are actually in that perfect world...

and your example would work as it is ..

http://www.jsfiddle.net/BtKGV/

Answer 5

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)