Insert in place without document.write

So here’s the situation: you want to syndicate some content using JavaScript to pull in the data (like AdWords or similar programs). The syndication script can’t know anything about the page it’s being used on — so it can’t have a dependency on the existence of particular elements. Yet the host page needs to be able to control where the content is inserted — the syndication script needs to insert the content wherever the <script> tag is.

How do you do it?

Well you probably do what Google does and use document.write. But document.write is not a nice technique, it has some notable issues:

document.write does not work in XHTML mode (on XHTML pages served as XML)
content written in with document.write may not subsequently appear in the page’s DOM, which means no further access to manipulate it programmatically, and no access to accessibility APIs
document.write is conceptually wrong because it treats nodes as serialized text — which they’re not — they’re nodes

But what’s the alternative? DOM creation techniques need an existing element reference to work with; even innerHTML needs to know where to write the HTML. And in both cases, simply appending to <body> is not an option if you want the new content to appear inline with the existing content.

I was faced with this dilemma a few days ago, until an obvious solution dawned on me — we do in fact have a predictable refence: the <script> element itself!

All we need is a way of identifying the including <script> in the DOM, and then we can use the insertBefore method to append new HTML directly before it.

So, given a syndication script with a fixed ID:

<script type="text/javascript" id="syndication" src="syndication.js"></script>

We can go from oldskool nastiness like this:

document.write('<p id="syndicated-content">Here is some syndicated content.</p>');

To modern loveliness like this:

var newcontent = document.createElement('p');
newcontent.id = 'syndicated-content';
newcontent.appendChild(document.createTextNode('Here is some syndicated content.'));

var scr = document.getElementById('syndication');
scr.parentNode.insertBefore(newcontent, scr);

We could even go a step further and remove the <script> ID, but in that case we would need a concrete method for identifying the specific element. We could do that by knowing its SRC:

var scripts = document.getElementsByTagName('script');
for(var i=0; i<scripts.length; i++)
{
    if(scripts[i].src == 'http://www.mydomain.com/syndication.js')
    {
        //scripts[i] is the one

        break;
    }
}

And there you have it – a simple but elegant way of inserting content in place, removing the last vestige of need for document.write!

Frequently Asked Questions (FAQs) about Alternatives to Document.write

What are the main issues with using document.write in JavaScript?

The use of document.write in JavaScript is often discouraged due to several reasons. Firstly, it can lead to performance issues as it blocks the parsing of the HTML document until the script execution is complete. Secondly, it can cause problems with the asynchronous loading of scripts. Lastly, it can lead to issues with the document’s state, especially when used after the document has been fully loaded. Therefore, it’s recommended to use alternatives to document.write.

What are some alternatives to document.write in JavaScript?

There are several alternatives to document.write in JavaScript. These include using innerHTML, textContent, or createElement along with appendChild. These methods are more efficient and do not block the HTML parsing process. They also allow for better control over where and how the new content is inserted into the document.

How can I use innerHTML as an alternative to document.write?

innerHTML is a property that can be used to get or set the HTML content of an element. To use it as an alternative to document.write, you can select an element and set its innerHTML property to the desired HTML string. For example:

document.getElementById('myElement').innerHTML = '<p>New content</p>';

How can I use textContent as an alternative to document.write?

textContent is a property that can be used to get or set the text content of a node and its descendants. To use it as an alternative to document.write, you can select an element and set its textContent property to the desired text. For example:

document.getElementById('myElement').textContent = 'New content';

How can I use createElement and appendChild as alternatives to document.write?

createElement is a method that can be used to create a new element, and appendChild is a method that can be used to append a child node to a parent node. To use them as alternatives to document.write, you can create a new element, set its content, and then append it to the desired parent element. For example:

var newElement = document.createElement('p');
newElement.textContent = 'New content';
document.getElementById('myElement').appendChild(newElement);

Are there any other methods I can use as alternatives to document.write?

Yes, there are other methods you can use as alternatives to document.write. These include insertAdjacentHTML, insertBefore, and replaceChild. These methods provide more flexibility in terms of where and how the new content is inserted into the document.

Can I use jQuery as an alternative to document.write?

Yes, jQuery provides several methods that can be used as alternatives to document.write. These include .html(), .text(), and .append(). These methods are similar to their JavaScript counterparts but provide a more convenient and powerful syntax.

What are the benefits of using alternatives to document.write?

Using alternatives to document.write can lead to several benefits. These include improved performance, better control over the document’s structure, and compatibility with modern web development practices. It also makes your code easier to read and maintain.

Can I still use document.write in modern web development?

While it’s technically possible to use document.write in modern web development, it’s generally discouraged due to the issues mentioned earlier. It’s recommended to use the alternatives instead, as they provide a more efficient and flexible way to manipulate the document’s content.

Where can I learn more about the alternatives to document.write?

There are many resources available online where you can learn more about the alternatives to document.write. These include web development tutorials, online courses, and documentation on JavaScript and jQuery. You can also check out the articles and discussions on websites like Stack Overflow and CodeProject.