Не удается добавить элемент

хорошая новость:

это 100% работает.

просто добавьте что-то внутри тега скрипта, например alert('voila!');. Правильный вопрос, который вы, возможно, захотите задать,"почему я не видел его в дом?".

Карл Сведберг сделал хорошее объяснение комментарию посетителя в jQuery API site. Я не хотите повторить все его слова, вы можете прочитать непосредственно здесь здесь (мне было трудно перемещаться по комментариям там).

все методы вставки jQuery используют функция domManip внутренне к очистите / отростчатые элементы перед и после того, как они будут вставлены в DOM. Одна из вещей the domManip функция делает это вытащить любой скрипт элементы, которые будут вставлены и запущены их через " процедуру evalScript" вместо того, чтобы вводить их с остальными из дома фрагмент. Он вставляет скрипты отдельно, оценивает их, а затем удаляет их из дома.

я считаю, что одна из причин jQuery делает это, чтобы избежать " разрешения Отказано " ошибки, которые могут возникнуть в Internet Explorer при вставке сценарии при определенных обстоятельствах. Он также избегает многократно вставка / оценка одного и того же скрипта (что потенциально может привести проблемы) если он находится внутри содержащего элемент, который вы вставка и затем двигаемся вокруг дома.

следующая вещь, я буду суммировать то, что плохие новости с помощью .append() функция для добавления скрипта.

---

и плохие новости есть..

вы не можете отлаживать свой код.

Я не шучу, даже если добавить debugger; ключевое слово между строкой, которую вы хотите установить в качестве точки останова, вы будете в конечном итоге получать только стек вызовов объекта, не видя точка останова в исходном коде,(не говоря уже о том, что это ключевое слово работает только в браузере webkit, все остальные основные браузеры, похоже, опускают это ключевое слово).

если вы полностью понимаете, что делает ваш код, то это будет незначительным недостатком. Но если вы этого не сделаете, вы в конечном итоге добавите debugger; ключевое слово повсюду, чтобы узнать, что не так с вашим (или моим) кодом. В любом случае, есть альтернатива, не забывайте, что javascript может изначально манипулировать HTML DOM.

---

временное решение.

используйте javascript (не jQuery) для управления HTML DOM

если вы не хотите потерять возможность отладки, чем вы можете использовать javascript родной HTML DOM манипуляции. Рассмотрим следующий пример:

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);

вот оно, совсем как в старые времена не так ли. И не забудьте очистить вещи, будь то в DOM или в памяти для всех объектов, на которые ссылаются и больше не нужны предотвращение утечек памяти. Вы можете рассмотреть этот код, чтобы очистить вещи:

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

недостатком этого обходного пути является то, что вы можете случайно добавить дубликат сценария, и это плохо. Отсюда вы можете слегка имитировать .append() функция путем добавления проверки объекта перед добавлением и удаления скрипта из DOM сразу после его добавления. Рассмотрим следующий пример:

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;
}

таким образом, вы можете добавить скрипт с возможностью отладки, находясь в безопасности от скрипта двуличность. Это просто прототип, вы можете расширить для того, что вы хотите, чтобы это было. Я использую этот подход и вполне доволен этим. Конечно, я никогда не буду использовать jQuery .append() добавить скрипт.

можно динамически загрузить файл JavaScript с помощью функции jQuery getScript

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

сейчас внешний скрипт будет вызван, и если он не может быть загружен, он будет постепенно деградировать.

что значит "не работает"?

jQuery обнаруживает, что вы пытаетесь создать элемент сценария и автоматически запускаете содержимое элемента в глобальном контексте. Ты хочешь сказать, что это не работает для тебя? -

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

---

Edit: если вы не видите элемент сценария в DOM (например, в Firebug) после запуска команды, это потому, что jQuery, как я уже сказал, запустит код, а затем удалит элемент сценария-I поверьте, что элементы скрипта всегда добавляются к телу... но в любом случае-размещение не имеет абсолютно никакого отношения к выполнению кода в этой ситуации.

это работает:

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

похоже, что jQuery делает что-то умное со скриптами, поэтому вам нужно добавить элемент html, а не объект jQuery.

попробуйте, это может быть полезно:

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

Я хочу сделать то же самое, но добавить тег script в другие рамки!

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>

The </script> в строковом литерале завершается весь скрипт, чтобы избежать этого "</scr" + "ipt>" можно использовать вместо этого.

добавление sourceURL в файл скрипта помогло, как указано на этой странице: https://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

1. в файле скрипта добавьте оператор с sourceURL, например " / / @ sourceURL=foo.ОАО"
2. загрузите скрипт с помощью jQuery $.getScript () и скрипт будут доступны на вкладке "Источники" в chrome dev tools

ваш скрипт , вы просто не можете использовать document.write от него. Используйте предупреждение, чтобы проверить его и избежать использования document.write. Заявления вашего JS-файла с document.write не будет выполняться, и остальная часть функции будет выполнена.

Это то, что я думаю, является лучшим решением. Google Analytics вводится таким образом.

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); })();

вам не нужен jQuery для создания элемент скрипта DOM. Это можно сделать с помощью vanilla ES6 вот так:

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!'))

Он не должен быть завернут в Promise, но это позволяет разрешить обещание при загрузке скрипта, помогая предотвратить условия гонки для длительных сценариев.

добавить скрипт в тело:

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

еще один способ сделать это, если вы хотите добавить код с помощью document.createElement метод, но затем с помощью .innerHTML вместо .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 );

Я пробовал это один и работает отлично. Просто замените < символ с \x3C.

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

или

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

вы можете проверить код здесь.

можно попробовать вот так

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

единственная причина, по которой вы не можете сделать "<script></script>" это потому, что строка не разрешена внутри javascript, потому что слой DOM не может разобрать, что такое js и что такое HTML.

Я написал npm пакет, который позволяет вам взять строку HTML,включая теги скрипт и добавить его в контейнер, в то время как выполнение скриптов

пример:

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)

найти его здесь: https://www.npmjs.com/package/appendhtml

просто создайте элемент, проанализировав его с помощью jQuery.

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

рабочий пример:https://plnkr.co/edit/V2FE28Q2eBrJoJ6PUEBz