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

Question

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?

Nick Vu · Accepted Answer · 2022-04-11 17:11:51Z

1

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.

edited Apr 11, 2022 at 17:11

answered Apr 11, 2022 at 16:53

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lissettdm · Accepted Answer · 2022-04-16 22:05:23Z

1

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

answered Apr 16, 2022 at 22:05

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Comments

mindthefrequency · Accepted Answer · 2022-04-11 16:35:16Z

0

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>

edited Apr 11, 2022 at 16:35

answered Apr 11, 2022 at 16:32

mindthefrequency

5462 silver badges11 bronze badges

2 Comments

Mr. Polywhirl Over a year ago

Referred to as an IIFE (Immediately Invoked Function Expression).

Ravindra Patel Over a year ago

Here i want to append html with dynamic js and css so css/js will apply for current page..

Mr. Polywhirl · Accepted Answer · 2022-04-11 16:51:41Z

0

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.

answered Apr 11, 2022 at 16:51

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

Comments

marc_s · Accepted Answer · 2022-04-19 05:01:24Z

0

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

create a script/link/style tag
edit the tags innerText/innerHTML
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);

edited Apr 19, 2022 at 5:01

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Apr 11, 2022 at 16:49

mindthefrequency

5462 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related