-1

EDIT: rlemon helped me get there. Thank you.

console.log(videoScript, 'log of script tag HTML')
var x = videoScript.outerHTML
document.getElementById('injectedScriptElement').innerText = x

I can now render the log of the script tag into the DOM.

I am trying to troubleshoot an issue I am having and the best way for me to show someone else is to print/render the console.log to the DOM so the person can easily copy&paste the html without diving into the console.

When I console.log a created script tag, I see the full html of the script tag in the console.

When I try to inject it into the DOM using innerHTML or innerText, I get the following in the DOM:

[object HTMLScriptElement]

I have also tried toString() and JSON.stringify but that renders out an empty object {}

Is there a way to do what I'm trying to achieve?

At the end of the day I can just add the code statically, but I would rather it come from the Javascript itself to reassure them that the output is actually coming from the Javascript and not just added manually by me.

4ndy
  • 446
  • 7
  • 26
  • No, you need to serialize the value explicitly yourself. There is no magic function doing this. The console does just the same. If you want to use the same format, you can find their serialisation routine in the source code of the devtools. – Bergi Sep 25 '19 at 19:38
  • Similar: https://stackoverflow.com/questions/36164005/is-it-possible-to-render-html-into-javascript-console – Oleg Sep 25 '19 at 19:39
  • And https://stackoverflow.com/questions/45132192/print-console-log-on-html – Oleg Sep 25 '19 at 19:41
  • I am guessing you want to use document.body.appendChild(elem); https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild – OwChallie Sep 25 '19 at 19:41
  • 3
    Show your actual code – epascarello Sep 25 '19 at 19:44

1 Answers1

2

using Element.outerHTML you can get the entire script tag including contents as a string. 

<script>
  console.log(123);
</script>

console.log( document.scripts[0].outerHTML );

will log: 

<script>
  console.log(123);
</script>
rlemon
  • 17,518
  • 14
  • 92
  • 123
  • I appreciate the edit making this a runnable snippet, but this code running in a sandbox will give weird results. I assume there is only one script tag. – rlemon Sep 25 '19 at 19:44
  • 1
    This doesn't actually do what the OP is asking for. – Scott Marcus Sep 25 '19 at 19:44
  • based on the comments: "When I console.log a created script tag, I see the full html of the script tag in the console. When I try to inject it into the DOM using innerHTML or innerText, I get the following in the DOM: [object HTMLScriptElement]" this is my interpretation of the problem. If this is not what OP means they can comment as much. – rlemon Sep 25 '19 at 19:45
  • 1
    Why are you not liking this comment? Appears to be doing exactly what I want... I use outerHTML on my script tag and add it to a variable. var x = videoScript.outerHTML document.getElementById('injectedScriptElement').innerText = x – 4ndy Sep 25 '19 at 19:47
  • @ScottMarcus it appears this was the problem :) – rlemon Sep 25 '19 at 19:48
  • The OP said he wants the script tag injected into the DOM, your code writes it to the console. The OP said he doesn't want to write it to the console. Now the OP says that it is what he wants. The OP isn't be clear on requirements. And, your code does not log what you say it does. – Scott Marcus Sep 25 '19 at 19:52
  • That is trivial and for the demo only. The core issue is getting a string you can send to the DOM. But if that is your hangup I can edit the demo. Seems silly to focus on that tho. and that code absolutely outputs what I said it would. – rlemon Sep 25 '19 at 19:54
  • What about this did you not understand Scott? "I am trying to troubleshoot an issue I am having and the best way for me to show someone else is to print/render the console.log to the DOM so the person can easily copy&paste the html without diving into the console." – 4ndy Sep 25 '19 at 19:57