For example,
var newElement = document.createElement('div');
newElement.innerHTML = "<p>new content</p><script>alert('Hello World!')</script>";
element.appendChild(newElement);
Result: "new content" is appended in page but there will be no alert saying Hello World!
I have tried innerHTML, insertAdjacentHTML, append, appendChild methods. But the problem is JS and CSS not loading dynamically.
In jQuery, after() works 👍🏻
$(selector).after("<p>new content</p><script>alert('Hello World!')</script>");
is there any equivalent for pure javascript?
If your are sure about HTML string content is safety and contains a string with valid HTML you can use Range.createContextualFragment() (executes scripts 🚨)
const HTMLContent = "<p>new content</p><script>alert('Hello World!')</script>";
const newElement = document.createRange().createContextualFragment(HTMLContent);
document.body.appendChild(newElement)
You can use eval to execute your scripts under string formats. jQuery also uses eval in some parts of DOM manipulation under the hood.
const content = "<p>new content<\/p><script>alert('Hello World!')<\/script>";
const newElement = document.createElement('div');
newElement.innerHTML = content
const scriptRegex = /(?<=<script>)(.*)(?=<\/script>)/g; //get scripts between script tags
const scripts = content.match(scriptRegex);
for(const script of scripts) {
eval(script) //execute your string as a script
}
document.getElementById("content").appendChild(newElement);<div id="content"></div>Side note, for your case, there is no way called safety to convert strings to scripts because somebody may inject malicious scripts into your strings and execute them without your notice, so you need to make sure all your strings are under your control properly. You can check XSS attack for a better understanding.
You have to call your alert when something happens, if you want the alert to be displayed when you append the HTML, then wrap it in a self executing function:
<script>
(function(){
alert('Hello World!');
})()
</script>