The JavaScript equivalent to PHP Echo/Print statements

# Table of Contents

# The JavaScript equivalent to PHP Echo/Print statements

The PHP echo/print statements are used to output data to the screen.

There are multiple ways to achieve this in JavaScript:

console.log() - outputs a message to the web console or the terminal in Node.js.
document.write() - writes a string of markup to the document.
appendChild - adds an element to the end of the list of children of the specified parent node.
innerHTML - gets or sets the HTML contained within an element.
innerText - gets or sets the text content of an element.

Let's first look at the console.log() method.

index.js

Copied!
console.log('bobbyhadz.com');

console.log(5 + 5);

If you need to run the code in the browser, create a simple HTML file that loads the index.js script.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

To start a development server, open your terminal in the directory where index.js and index.html are stored and run the following command.

shell

Copied!
npx serve .

Press F12 to open the browser's developer tools and select the Console tab.

select console tab in browser

You will see the two messages logged to the Console.

index.js

Copied!
console.log('bobbyhadz.com');

console.log(5 + 5);

If you use Node.js, the console.log() output will be printed to your terminal.

shell

Copied!
node index.js

output printed to terminal in node

If you run into any issues when using console.log(), check out the following article.

# Using document.write() as an equivalent to PHP's echo/print

You can also use the document.write() method as an equivalent to PHP's echo/print statements.

Here is the HTML page that loads the index.js file.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript file.

index.js

Copied!
document.write(
  `<div>
    <h2>bobbyhadz.com</h2>

    <p>
     One, <span style="background-color: lime;">Two</span>, Three
    </p>
  </div>`,
);

using document write as php echo print equivalent

Notice that we wrapped the string in backticks `, not single quotes.

The string is a template literal and spans multiple lines.

We passed markup to the document.write() method but you can also pass it a simple string.

index.js

Copied!
document.write('bobbyhadz.com');

using document write with string

The document.write() method writes a string of text to the document.

However, if you open your console, you will get the following message:

[Violation] Avoid using document.write()

This is because using the document.write() method is considered a bad price.

If executed after the page has finished loading, document.write() will overwrite the page.

This is most often not what you want.

# Using appendChild() as an equivalent to PHP's echo/print

You can also use the appendChild() method as an equivalent to PHP's echo/print statements.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <div id="box"></div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

const paragraph = document.createElement('p');

paragraph.innerText = 'apple, kiwi, mango';

box.appendChild(paragraph);

using document write with string

We used the document.getElementById() method to select the div element by its id attribute.

index.js

Copied!
const box = document.getElementById('box');

The document.createElement() method takes a tag name and creates an element of the specified type.

index.js

Copied!
const paragraph = document.createElement('p');

We used the innerText method to set the text content of the element.

index.js

Copied!
paragraph.innerText = 'apple, kiwi, mango';

The last step is to call the appendChild() method to append the paragraph to the div.

index.js

Copied!
box.appendChild(paragraph);

The appendChild method adds a node to the end of the list of children of the specified parent node.

You can also append a DOM element to the body tag.

index.js

Copied!
const paragraph = document.createElement('p');

paragraph.innerText = 'apple, kiwi, mango';

document.body.appendChild(paragraph);

using document write with string

# Using innerHTML as an equivalent to PHP's echo/print

You can also use the innerHTML property as an equivalent to PHP's echo/print statements.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      body {
        margin: 100px;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <div id="box"></div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

box.innerHTML = `
<div>
  <p>Apple, <span style="color: green;">Kiwi</span>, Banana</p>

  <p>One, Two, Three</p>
</div>
`;

using innerhtml as equivalent to php echo print

Notice that we used backticks ` to wrap the string and not single quotes.

The innerHTML property gets or sets the HTML markup that is contained within the element.

Note that setting the value of the innerHTML property removes all of the element's descendants and replaces them with the given HTML string.

You can also interpolate a variable in the template literal.

index.js

Copied!
const box = document.getElementById('box');

const fruit = 'Kiwi';
const number = 'Three';

box.innerHTML = `
<div>
  <p>Apple, <span style="color: green;">${fruit}</span>, Banana</p>

  <p>One, Two, ${number}</p>
</div>
`;

using innerhtml as equivalent to php echo print

The dollar sign and curly braces ${} syntax enables us to interpolate a variable in the template literal.

However, note that you shouldn't use the innerHTML property with user-generated content.

This would leave you vulnerable to XSS (cross-site scripting) attacks.

# Using innerText as an equivalent to PHP's echo/print

You can also use the innerText property as an equivalent to PHP's echo/print statements.

The innerText property gets or sets the text content of the given node.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <div id="box"></div>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const box = document.getElementById('box');

const fruit = 'Kiwi';

box.innerText = `Apple, Banana, ${fruit}`;

using innertext as echo print equivalent

We used a template literal in the example but you can also use a simple string.

index.js

Copied!
const box = document.getElementById('box');

box.innerText = 'Apple, Banana, Kiwi'

The innerText property gets or sets the text content of the element.

When used as a setter, the property replaces the element's children with the given value and converts line breaks to <br> elements.

Here is an example of how line breaks are preserved.

index.js

Copied!
const box = document.getElementById('box');

box.innerText = `Apple
Banana
Kiwi`;

innertext preserves line breaks

Using the innerText property is especially useful when you work with user-generated content (e.g. you have to render usernames, emails, etc).

The innerText property is not vulnerable to XSS attacks.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

The JavaScript equivalent to PHP Echo/Print statements

# Table of Contents