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 acode
element inside it:
<div id="myDiv">
<pre><code class="javascript">alert('Hello World!');</code></pre>
</div>
- Add the class
javascript
to thecode
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.