Динамическое добавление jquery в div

Question

Извинения. Я знаю, что есть ряд вопросов по тем же линиям, и они мне очень помогли, но я все еще падаю на последний барьер.

Я пытаюсь динамически добавлять некоторые JQuery в DIV с помощью этого:

function displayPage(position,page){ 
    // position arrives looking something like '#pageW20' - ignore quotes 
    // page arrives looking something like 'pages/benefits.html' - ignore quotes 
    var pos = position.substring(1); // New variable without the '#' that appears in the first character of position 
    var myDiv = document.getElementById(pos); // Find the div, typically equates to a div id similar to 'pageW20' 
    var str = "<script type='text/javascript'>"; 
/* Build the script which typically looks like this:- 
<script type='text/javascript'> $("#pageB15").load("pages/benefits.html", function(){openLetter()}); </script> 
*/ 
    str += '$(' + '"' + position + '"' +').load(' + page + ', function(){openLetter()})'; 
    str += '<'; 
    str += '/script>'; 
    alert(str); // Works to here, alert churns out expected output. 
    //$('"' + position + '"').append(str); // Tried this, end up with syntax error 
    myDiv.appendChild(str); // This gives Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. 
} 

Последние две строки показывают ошибки я получаю пытаясь 2 разные методы. Любые подсказки. Спасибо за ваш интерес.

Update: Вот что я получаю в моей консоли на стадии предупреждения(), которая является то, что я надеялся на -

<script type='text/javascript'>$("#pageW20").load("pages/work.html", function(){openLetter()})</script> 

Update: Теперь решена, благодаря @gaetano. Мой код теперь выглядит следующим образом:

function displayPage(position,page){ 
    var pos = position.substring(1); 
    var myDiv = document.getElementById(pos); 
    myDiv.innerHTML=""; // Remove existing div content 
/* Build the script which typically looks like this:- 
<script type='text/javascript'> $("#pageB15").load("pages/benefits.html", function(){openLetter()}); </script> 
*/ 
    var str = '$(' + '"' + position + '"' +').load(' + page + ', function(){openLetter()});'; 
    console.log(str); 
    var s = document.createElement('script'); 
    s.type = 'text/javascript'; 
    s.text = str; 
    myDiv.appendChild(s); 
} 

Answer 1

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

Ошибка Вы получаете:

myDiv.appendChild (ул);

Но appendChild требует в качестве первого параметра узла.

Так что, если вам нужно продолжать в этом направлении, вы должны создать элемент узла сценария и после того, как вы можете добавить его в HTML, как в моем примере:

function displayPage(position, page) { 
 
    var pos = position.substring(1); // New variable without the '#' that appears in the first character of position 
 
    var myDiv = document.getElementById(pos); // Find the div, typically equates to a div id similar to 'pageW20' 
 
    var str = '$(' + '"' + position + '"' + ').load("' + page + '", function(){openLetter()})'; 
 
    var s = document.createElement('script'); 
 
    s.type = 'text/javascript'; 
 
    s.text = str; 
 
    myDiv.appendChild(s); 
 
} 
 

 
displayPage('_XXX', 'page'); 
 

 
console.log(document.getElementById('XXX').outerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="XXX"></div>

Answer 2

str переменных вы передаете не узел, это строка. Попробуйте сначала, используя:

var line = document.createElement("p"); 
line.innerHTML = str; 
myDiv.appendChild(line);