Hướng dẫn pure javascript append html

For example,

var newElement = document.createElement('div');
newElement.innerHTML = "
new content
";
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("
new content
");

is there any equivalent for pure javascript?

Mr. Polywhirl

36.6k12 gold badges76 silver badges124 bronze badges

asked Apr 11 at 16:27

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 = "
new content<\/p>

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.

answered Apr 11 at 16:53

Nick VuNick Vu

11.9k2 gold badges17 silver badges27 bronze badges

0

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 = "
new content
";
const newElement = document.createRange().createContextualFragment(HTMLContent);
document.body.appendChild(newElement)

Working example

answered Apr 16 at 22:05

lissettdmlissettdm

10.9k1 gold badge12 silver badges35 bronze badges

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:

answered Apr 11 at 16:32

2

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 = `
new content<\/p>`;

const scriptHTML = `
  
36.6k12 gold badges76 silver badges124 bronze badges
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);
 
marc_s
714k171 gold badges1315 silver badges1433 bronze badges
 answered Apr 11 at 16:49
 
 

Đọc tiếp