Using document.write within loops

Question

Using document.write within loops

I am facing an issue with the following HTML code:

<html>
<script>
        function explode() {
                pp = document.getElementsByTagName("a");
                for(i=0;i<pp.length;i++) {
                    document.write(pp[i].href);
                }
        }
</script>

<body>
 <a href="http://google.com">Google</a>
 <a href="http://yahoo.com">Yahoo</a>
 <button onclick="explode()">Explode</button>
<body>

</html>

After executing this code, only the first hyperlink is being printed on my window. Can anyone provide an explanation for this behavior?

Update I have considered the response that document.write resets the page contents. However, I expected to see the last element in the variable pp since all objects are listed within it. Why does it display the first element instead?

javascript dom

Answer 1

Answer №1

If content is added to the document after it has finished loading, a new document will be opened and replace the existing one. While the document is still loading, you can utilize document.write to insert content (for example, within script tags inline with the code). However, after the document has loaded completely, using document.write will automatically trigger document.open to start writing to a new document.

The result obtained from the `getElementByTagName` method produces a live list that gets updated when elements are added/removed from the DOM. Initially, this list will be empty when the first element is written to the document because there are no matching elements in the document at that point.

Answer 2

If content is added to the document after it has finished loading, a new document will be opened and replace the existing one. While the document is still loading, you can utilize document.write to insert content (for example, within script tags inline with the code). However, after the document has loaded completely, using document.write will automatically trigger document.open to start writing to a new document.

The result obtained from the `getElementByTagName` method produces a live list that gets updated when elements are added/removed from the DOM. Initially, this list will be empty when the first element is written to the document because there are no matching elements in the document at that point.

Answer 3

Answer №2

document.write - will erase the contents of your browser when it encounters document.write for the first time!

You need to combine the values.

Follow these steps:

function burst() {
        pp = document.getElementsByTagName("a");
        var b='';
        for(i=0;i<pp.length;i++) {
            b+=pp[i].href
        }
    document.write(b);
}

http://jsbin.com/buzexuce/2/edit

To demonstrate in reverse direction:

check out what's happening here:

<a href="http://google.com">Google</a>
<a href="http://yahoo.com">Yahoo</a>
<button onclick="burst()">Burst</button>

<script>
var  pp = document.getElementsByTagName("a");
for(i=0;i<pp.length;i++) 
{ document.write(i);}
</script>

(everything works as expected before the dom is ready).

Answer 4

document.write - will erase the contents of your browser when it encounters document.write for the first time!

You need to combine the values.

Follow these steps:

function burst() {
        pp = document.getElementsByTagName("a");
        var b='';
        for(i=0;i<pp.length;i++) {
            b+=pp[i].href
        }
    document.write(b);
}

http://jsbin.com/buzexuce/2/edit

To demonstrate in reverse direction:

check out what's happening here:

<a href="http://google.com">Google</a>
<a href="http://yahoo.com">Yahoo</a>
<button onclick="burst()">Burst</button>

<script>
var  pp = document.getElementsByTagName("a");
for(i=0;i<pp.length;i++) 
{ document.write(i);}
</script>

(everything works as expected before the dom is ready).

Answer 5

Answer №3

This is the proper way:

console.log(pp[i].href);

Answer 6

This is the proper way:

console.log(pp[i].href);

Using document.write within loops

Answer №1

Answer №2

Answer №3

Similar questions

Using the spread syntax to eliminate a property from an object within a ReactJs element

Exploring the colors of legend navigation icons in Google Pie charts

Retrieving a list of numbers separated by commas from an array

Problem with validation in jQuery not being compatible with Kendo Button (sample code provided in jsfiddle)

Strange behavior noticed with Bootstrap accordion

Inoperable await statement within a while loop

Vue with DevXtreme DataGrid

Error encountered in NodeJS after refreshing the node server

What mechanisms do chat apps use to detect when a user sends a message and trigger a re-render of the chat

What is the process for defining the type of the context for an Apollo resolver?

What is the reason for the error occurring in express.js?

Exploring the functionalities of JavaScript methods and nested components within Vue.js

angular-library.js:6 Uncaught TypeError: Unable to access the 'toLowerCase' property of an undefined value

problem encountered when closing datepicker

Tips for implementing advertisements through a content management system or JavaScript

Struggling with dynamic values and regex while utilizing HTML template strings. Need help overcoming regex challenge

Adding a value to an element in JavaScript to interact with it using Selenium

Is there a way to incorporate an array into an array of arrays with jQuery?

Scheduled tasks arranged by the user

Using Delta encoding to optimize JSON objects