printing text in a certain position using javascript

Question

how can i print a text in a specific position in a page? when i use document.write() the text prints in a new page.

Answer 1

You cannot use document.write() after document have been loaded. Use, for example, JavaScript that creates element with position: absolute, assigns necessary left, right and innerHTML properties.

Answer 2

You can use document.write if you put it in the body of the document. It will print to where you the script tag is located. If you want to alter the html of a page after load, you can use javascript to change the content of certain element's through id's, using innerHTML, or createChild and other DOM surfing methods. Manipulating a page's content with javascript is often called Dynamic HTML. w3 tutorial on dhtml

If you want to print at a specific x-y coordinate, You will probably want to create a div and position it absolutely, then add its html with innerHTML or other methods.

I can't really think of when you would want to print at an x-y coordinate, you would just be sticking stuff on top of the page. You would need an opaque background to make sure the text was readable. It would be more like your own popup div, in that you could position it where you want and change its content. :D

Answer 3

You question is not very specific. But try this out for size:

HTML:

<div>Some content</p>
<div>Some more content</div>
<div id="specificposition"></div>
<div>Even more content</div>

JavaScript:

var target = document.getElementById("specificposition"); // find the list-item

target.innerHTML = "Here I am!"; // set it's content

If you use jQuery, DOM manipulation is a lot simpler. Lets say I wanted to insert another list-item after the 2nd list-item in the unordered list below:

HTML:

<ul>
    <li></li>
    <li></li> <!-- this is the second list-item -->
    <li></li>
    <li></li>
</ul>

I could do (JavaScript / jQuery):

$(function ()
{
    // this function gets executed once the DOM is ready for manipulation

    var target = $("li:eq(1)"); // get the 2nd list-item in the unordered list

    target.after("<li>Here I am!</li>"); // insert a new list-item
});

The result:

<ul>
    <li></li>
    <li></li> <!-- this is the second list-item -->
    <li>Here I am!</li>
    <li></li>
    <li></li>
</ul>