Is there a php echo/print equivalent in javascript

Is there a php echo/print equivalent in javascript

Say I want to print html from inside a script tag.
A source like this

foo

bar

should look something like this in browser after the script has run

foo

Print this after the script tag
bar

I could write my own code for this purpose but since this looks to me like a very simple problem, I’m guessing either I’ve missed something or my thinking is flawed in some way and printing is left out intentionally.
Also, somewhat related: I’d like to know if a script is (or can be made) aware of the script tags surrounding it. With this information it would be much easier to find the position for the printed html code to be injected into, assuming it’s not highly discouraged.
To clarify: I don’t need you to write a print function for me. I only need to know if a native method to achieve this exists and I’ve missed it or alternatively the reason it shouldn’t be done.
EDIT
I realized that I didn’t think the question through.
I got my facts straight and now almost everything seems to be working. I should’ve originally mentioned that the print function was needed inside templates – I’m working on a template engine experiment. I managed to work it out by separating scripts from plain html and concatenating the split html sans scripts with script output.
As I was writing the code I noticed that everything wouldn’t go so smooth because of the asynchronous nature of js. I guess I was expecting to be able to do any kind of js magic in templates, just like I could in php. Seems like actually supporting async code in a fool-proof manner inside templates will require some more thought.

Solutions/Answers:

Solution 1:

You need to use document.write()

<div>foo</div>
<script>
document.write('<div>Print this after the script tag</div>');
</script>
<div>bar</div>

Note that this will only work if you are in the process of writing the document. Once the document has been rendered, calling document.write() will clear the document and start writing a new one. Please refer to other answers provided to this question if this is your use case.

Solution 2:

You can use document.write, however it’s not a good practice, it may clear the entire page depends on when it’s being executed.

You can use Element.innerHtml like this:

<div>foo</div>
<span id="insertHere"></span>
<div>bar</div>

<script>
var el = document.getElementById('insertHere');
el.innerHTML = '<div>Print this after the script tag</div>';
</script>

Solution 3:

// usage: log('inside coolFunc',this,arguments);
// http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function(){
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  if(this.console){
    console.log( Array.prototype.slice.call(arguments) );
  }
};

Using window.log will allow you to perform the same action as console.log, but it checks if the browser you are using has the ability to use console.log first, so as not to error out for compatibility reasons (IE 6, etc.).

Solution 4:

You can use

function echo(content) {  
    var e = document.createElement("p");
    e.innerHTML = content;
    document.currentScript.parentElement.replaceChild(document.currentScript, e);
}

which will replace the currently executing script who called the echo function with the text in the content argument.

Solution 5:

From w3school’s page on JavaScript output,

JavaScript can “display” data in different ways:

Writing into an alert box, using window.alert().

Writing into the HTML output using document.write().

Writing into an HTML element, using innerHTML.

Writing into the browser console, using console.log().

Solution 6:

You can use document.write or even console.write (this is good for debugging).

But your best bet and it gives you more control is to use DOM to update the page.

References

Related:  Make a link from Electron open in browser