append raw html javascript

How to Append Raw HTML and JavaScript in HTML Div?#

Appending raw HTML and JavaScript in an HTML div can be quite useful if you want to dynamically add content to your webpage. There are primarily two ways you can achieve this:

1. Using innerHTML Property#

The innerHTML property allows you to add raw HTML and JavaScript code to an HTML element. Here's how you can use it:

<div id="myDiv"></div>

<script>
    document.getElementById("myDiv").innerHTML = "<p>Hello World!</p>";
</script>

In the above example, we create an empty div element with an ID of "myDiv". We then use the document.getElementById() method to retrieve the element and set its innerHTML property to the raw HTML code we want to append.

You can also append JavaScript code in a similar manner:

<div id="myDiv"></div>

<script>
    document.getElementById("myDiv").innerHTML = "<script>alert('Hello World!');</script>";
</script>

In this example, we're appending a script tag that will display an alert message when the page loads.

2. Using createElement() and appendChild() Methods#

You can also use the createElement() and appendChild() methods to create and append new HTML elements to an existing element. Here's how:

<div id="myDiv"></div>

<script>
    var newElement = document.createElement("p");
    var newContent = document.createTextNode("Hello World!");
    newElement.appendChild(newContent);

    var container = document.getElementById("myDiv");
    container.appendChild(newElement);
</script>

In this example, we create a new p element with the text "Hello World!" using the createElement() and createTextNode() methods. We then retrieve the existing div element using document.getElementById(), and append the new element to it using the appendChild() method.

You can also append JavaScript code in a similar manner:

<div id="myDiv"></div>

<script>
    var newScript = document.createElement("script");
    var newContent = document.createTextNode("alert('Hello World!');");
    newScript.appendChild(newContent);

    var container = document.getElementById("myDiv");
    container.appendChild(newScript);
</script>

In this example, we create a new script element with the JavaScript code that will display an alert message. We then append the script to the existing div element using the appendChild() method.

You can use any of the above methods to append raw HTML and JavaScript code to an HTML div. However, it's important to be cautious while appending raw code as it can potentially be a security risk.

Using Highlight.js for Syntax Highlighting#

If you want to highlight the syntax of your JavaScript code, you can use a library like Highlight.js. Here's how:

• Include the Highlight.js library in your HTML file:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    

• Wrap your JavaScript code inside a pre element with a code element inside it:

<div id="myDiv">
        <pre><code class="javascript">alert('Hello World!');</code></pre>
    </div>
    

• Add the class javascript to the code element:

The library will automatically apply syntax highlighting to your JavaScript code.

That's it! You now know how to append raw HTML and JavaScript to an HTML div and also how to use Highlight.js for syntax highlighting.