Insert in place without document.write

We can go from oldskool nastiness like this:

document.write('<p >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: </script>

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 = '

New content

';

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.

The above is the detailed content of Insert in place without document.write. For more information, please follow other related articles on the PHP Chinese website!