CODEWITHSUNDEEP
javascripthtml
Ravindra Patel
Ravindra Patel

Reputation: 337

How to append HTML content with CSS, JS in current webpage using pure javascript?

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?

Upvotes: 2

Views: 1231

Answers (5)

mindthefrequency
mindthefrequency

Reputation: 546

If you want to append a script or a stylesheet dynamically into your page, you should:

  1. create a script/link/style tag
  2. edit the tags innerText/innerHTML
  3. append the tag to your page's head element

Here's an example to append a script:

var script = document.createElement('script');
    script.src = 'some url'; // use this for external scripts
    script.innerHTML = 'your script'; // use this for writing your own script content

document.getElementsByTagName('head')[0].appendChild(script);

Upvotes: 0

lissettdm
lissettdm

Reputation: 13078

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)

Working example

Upvotes: 1

Nick Vu
Nick Vu

Reputation: 15520

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.

Upvotes: 1

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

Scripts cannot be added directly to the DOM as HTML text and executed. I would separate the action into two phases. Insert the HTML and add the script to the end of the document body as a contextual fragment.

const insertHTML = (domHTML, scriptHTML, target = document.body) => {
  const el = document.createElement('div');
  el.innerHTML = domHTML;
  document.body.appendChild(el);
  document.body.append(document.createRange().createContextualFragment(scriptHTML));
};

const domHTML = `<p>new content<\/p>`;

const scriptHTML = `
  <script type="text/javascript">
    alert('Hello World!');
  <\/script>
`;

insertHTML(domHTML, scriptHTML);

This logic was borrowed from Tilak Maddy's response in a related question.

Upvotes: 0

mindthefrequency
mindthefrequency

Reputation: 546

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>

Upvotes: 0

Related Questions