1

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!

Improve this question

5 Answers 5

Reset to default
2

We are actually in that perfect world...

and your example would work as it is ..

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

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

2 Comments

That's interesting, probably it works because page is not yet loaded completely. I updated example to use button. But maybe I do not need to execute it after page is loaded, have to check. Thanks!
@Nikita, i see ... indeed, you cannot use document write after the document has been closed (completely loaded).. the jquery append(), prepend() and html() will handle the adding before/after or replacing another element..
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.

Improve this answer

10 Comments

Sorry, that would limit number of code instances in the page to 1, or user would have to make up other identifier instead of 'p:first' each time.
I gave you an example. You can put them all in a div like <div id="content"></div> then use $('#content').append( '<div>some content</div>' );
'<div id="content">' is exactly the option I mentioned in my question. No need to repeat it.
I don't see what your problem is? It's a solution? What do you want different? I don't understand how you're wording your question.
'<div id' solution would require user to generate unique id each time he uses this code (possibly several examples on one page). It's not too difficult, but user may not be a programmer and I don't want to stretch his brain too much.
|
0

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/

Improve this answer

5 Comments

Sorry, but doesn't seem to be relevant to the question at all.
The question title is "Write html content from javascript" -- how is adding elements via Javascript not relevant?
That's only title of the question. The question itself is about particular trick.
Perhaps your question leaves some ambiguity that we need clarification on. You might want to explain why you need this functionality, to better help us answer you.
In short, this piece of js queries another server and inserts returned html widget in the page. And each widget instance on the page is isolated (i.e., if you press button on one widget, it doesn't affect others). Not sure if it makes any difference.
0

look up appendChild()

Improve this answer

Comments

0

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)

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.