Ajout dynamique jquery dans div

Question

Excuses, je sais qu'il y a un certain nombre de questions dans le même sens et elles m'ont beaucoup aidé mais je suis toujours tomber à l'obstacle final.

J'essaie d'ajouter dynamiquement une jQuery dans un div en utilisant ceci:

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'. 
} 

Les deux dernières lignes montrent les erreurs que je reçois d'essayer 2 méthodes différentes. Des indices Merci d'apprécier votre intérêt.

Mise à jour: Voici ce que je reçois dans ma console à l'étape d'alerte() qui est ce que j'espérais -

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

Mise à jour: maintenant résolu, grâce @gaetano. Mon code ressemble maintenant à:

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

Je ne comprends pas pourquoi vous essayez de créer et ajouter un script à la volée comme décrit dans les commentaires.

L'erreur que vous obtenez est:

myDiv.appendChild (str); Mais appendChild nécessite comme premier paramètre un nœud.

Donc, si vous devez continuer dans cette direction, vous devez créer un élément de noeud de script et après vous pouvez l'ajouter à la html comme dans mon exemple:

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

La variable str vous passez n'est pas un nœud, il est une chaîne. Essayez d'abord en utilisant:

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