Nie można dodać elementu

Dobra wiadomość jest taka:

w 100% działa.

Wystarczy dodać coś wewnątrz znacznika script np. alert('voila!');. Właściwe pytanie, które chciałbyś zadać może, "dlaczego nie widziałem tego w domu?".

Karl Swedberg przedstawił miłe Wyjaśnienie komentarza odwiedzającego w jQuery API site . I Nie chcesz powtórzyć wszystkie jego słowa, można przeczytać bezpośrednio tam tutaj (trudno mi było nawigować poprzez komentarze tam) .

wszystkie metody wstawiania jQuery wykorzystują funkcja domManip wewnętrznie do czyszczenie / przetwarzanie elementów przed i po ich włożeniu do DOM. Jedna z rzeczy domManip funkcja does is pull out any script elementy, które mają być wstawiane i uruchamiane ich poprzez " procedurę evalScript" zamiast wstrzyknąć im resztę fragment DOM. Wstawia Skrypty oddzielnie, ocenia je, a następnie usuwa z domu.

uważam, że jednym z powodów jQuery czy jest to unikanie " zgody Denied" błędy, które mogą wystąpić w Internet Explorer podczas wstawiania skrypty w pewnych okolicznościach. Unika również wielokrotnego wstawianie / ocenianie tego samego skryptu (co potencjalnie może spowodować problemy), jeśli znajduje się w obrębie element, który wstawiasz i następnie poruszając się po domu.

Następną rzeczą jest to, że podsumuj złą wiadomość, używając funkcji .append() do dodania skryptu.

A zła wiadomość jest taka..

nie możesz debugować kodu.

Nie żartuję, nawet jeśli dodasz słowo kluczowe debugger; między wierszem, który chcesz ustawić jako punkt przerwania, otrzymasz tylko stos wywołań obiektu bez zobaczenia punktu przerwania w kodzie źródłowym, (nie wspominając o tym, że to słowo kluczowe działa tylko w przeglądarce webkit, wszystkie inne główne przeglądarki wydają się pomijać to słowo kluczowe) .

Jeśli w pełni rozumiesz, co robi twój kod, to będzie to drobna wada. Ale jeśli tego nie zrobisz, w końcu dodasz debugger; słowo kluczowe wszędzie, aby dowiedzieć się, co jest nie tak z twoim (lub moim) kodem. W każdym razie, istnieje alternatywa, nie zapominaj, że javascript może natywnie manipulować HTML DOM.

Obejście.

użyj javascript (nie jQuery) do manipulowania HTML DOM

If you don ' t want to lose możliwość debugowania, niż można użyć javascript native HTML DOM manipulacji. Rozważ ten przykład:

var script   = document.createElement("script");
script.type  = "text/javascript";
script.src   = "path/to/your/javascript.js";    // use this for linked script
script.text  = "alert('voila!');"               // use this for inline script
document.body.appendChild(script);

document.body.removechild(document.body.lastChild);
delete UnusedReferencedObjects; // replace UnusedReferencedObject with any object you created in the script you load.

Wadą tego obejścia jest to, że możesz przypadkowo dodać duplikat skryptu, a to jest złe. Od tutaj możesz nieco naśladować funkcję .append(), dodając weryfikację obiektu przed dodaniem i usuwając skrypt z DOM zaraz po dodaniu. Rozważ ten przykład:

function AddScript(url, object){
    if (object != null){
        // add script
        var script   = document.createElement("script");
        script.type  = "text/javascript";
        script.src   = "path/to/your/javascript.js";
        document.body.appendChild(script);

        // remove from the dom
        document.body.removeChild(document.body.lastChild);
        return true;
    } else {
        return false;
    };
};

function DeleteObject(UnusedReferencedObjects) {
    delete UnusedReferencedObjects;
}

W ten sposób możesz dodać skrypt z możliwością debugowania, chroniąc przed dwulicowością skryptu. To tylko prototyp, możesz go rozbudować o cokolwiek chcesz. Korzystam z tego podejścia i jestem z tego całkiem zadowolony. Na pewno nigdy nie użyję jQuery .append() do dodania skryptu.

Możliwe jest dynamiczne ładowanie pliku JavaScript za pomocą funkcji jQuerygetScript

$.getScript('http://www.whatever.com/shareprice/shareprice.js', function() {
  Display.sharePrice();
});

Teraz zostanie wywołany zewnętrzny skrypt, a jeśli nie będzie można go załadować, to z wdziękiem ulegnie degradacji.

Jak to "nie działa"?

JQuery wykryje, że próbujesz utworzyć element skryptu i automatycznie uruchomi zawartość elementu w kontekście globalnym. Chcesz mi powiedzieć, że to nie działa na Ciebie? -

$('#someElement').append('<script>alert("WORKING");</script>');

Edit: jeśli nie widzisz elementu SCRIPT w DOM (na przykład w Firebug) po uruchomieniu polecenia, to dlatego, że jQuery, jak powiedziałem, uruchomi kod, a następnie usunie element SCRIPT-wierzę, że skrypt elementy są zawsze dołączane do ciała... ale w każdym razie - umieszczenie nie ma absolutnie żadnego wpływu na wykonanie kodu w tej sytuacji.

To działa:

$('body').append($("<script>alert('Hi!');<\/script>")[0]);

Wygląda na to, że jQuery robi coś sprytnego ze skryptami, więc musisz dołączyć element html, a nie obiekt jQuery.

Spróbuj to może być pomocne:

var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src","scriptAnalytics.js");
document.getElementsByTagName("head")[0].appendChild(fileref);

Chcę zrobić to samo, ale dodać znacznik skryptu w innej ramce!

var url = 'library.js'; 
var script = window.parent.frames[1].document.createElement('script' ); 
script.type = 'text/javascript'; 
script.src = url;
$('head',window.parent.frames[1].document).append(script);

<script>
    ...
    ...jQuery("<script></script>")...
    ...
</script>

</script> wewnątrz ciągu literal kończy cały skrypt, aby uniknąć tego, że "</scr" + "ipt>" może być używany zamiast.

Dodanie źródła w pliku skryptu pomogło jak wspomniano na tej stronie: https://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

1. w pliku skryptu dodaj polecenie sourceURL w stylu " / / @ sourceURL=foo.js "
2. załaduj skrypt używając jQuery $.getScript () i skrypt będą dostępne w zakładce "źródła" w Chrome Dev tools

Twój skrypt jest wykonywany, po prostu nie możesz użyć document.write z niego. Użyj alertu, aby go przetestować i unikaj używania document.write. Polecenia Twojego pliku js z document.write nie zostaną wykonane, a reszta funkcji zostanie wykonana.

To jest to, co uważam za najlepsze rozwiązanie. Google Analytics jest wstrzykiwany w ten sposób.

var (function(){
    var p="https:" == document.location.protocol ? "https://" : "http://";
        d=document,
        g=d.createElement('script'),
        s=d.getElementsByTagName('script')[0];
        g.type='text/javascript';
        g.src=p+'url-to-your-script.js';
        s.parentNode.insertBefore(g,s); })();

Nie potrzebujesz jQuery, aby utworzyć Element Script DOM . Można to zrobić z vanilla ES6 Tak:

const script = "console.log('Did it work?')"
new Promise((resolve, reject) => {
  (function(i,s,o,g,r,a,m){
      a=s.createElement(o),m=s.getElementsByTagName(o)[0];
      a.innerText=g;
      a.onload=r;m.parentNode.insertBefore(a,m)}
  )(window,document,'script',script, resolve())
}).then(() => console.log('Sure did!'))

Nie musi być zawinięty w Promise, ale dzięki temu można rozwiązać obietnicę, gdy skrypt się ładuje, pomagając zapobiegać Warunkom wyścigu dla skryptów długo działających.

Dołączenie skryptu do body:

$(document).ready(function() {
    $("<script>", {  src : "bootstrap.min.js",  type : "text/javascript" }).appendTo("body");
});

Innym sposobem na dodanie kodu jest użycie metody document.createElement, a następnie użycie .innerHTML zamiast .src.

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.innerHTML = 'alert("Hey there... you just appended this script to the body");';
$("body").append( script );

Próbowałem tego [5]} i działa dobrze. Wystarczy zastąpić < symbolem \x3C.

// With Variable
var code = "\x3Cscript>SomeCode\x3C/script>";
$("#someElement").append(code);

Lub

//Without Variable
$("#someElement").append("\x3Cscript>SomeCode\x3C/script>");

Możesz przetestować kod tutaj .

Można spróbować w ten sposób

var code = "<script></" + "script>";
$("#someElement").append(code);

Jedynym powodem, dla którego nie możesz zrobić "<script></script>" jest to, że łańcuch znaków nie jest dozwolony w javascript, ponieważ warstwa DOM nie może analizować co to jest js, a co HTML.

Napisałem npm pakiet, który pozwala na pobranie ciągu HTML, wraz ze znacznikami skryptu i dołączenie go do kontenera podczas wykonywania skryptów

Przykład:

import appendHtml from 'appendhtml';

const html = '<p>Hello</p><script src="some_js_file.js"></script>'; 
const container = document.getElementById('some-div');

await appendHtml(html, container);

// appendHtml returns a Promise, some_js_file.js is now loaded and executed (note the await)

Znajdziesz go tutaj: https://www.npmjs.com/package/appendhtml

Po prostu utwórz element, analizując go za pomocą jQuery.

<div id="someElement"></div>
<script>
    var code = "<script>alert(123);<\/script>";
    $("#someElement").append($(code));
</script>

Przykład roboczy: https://plnkr.co/edit/V2FE28Q2eBrJoJ6PUEBz