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种不同方法的错误。任何线索。谢谢你的兴趣。

更新：这是我在alert（）阶段在控制台中获得的内容，这是我希望的 -

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

更新：现已解决，感谢@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

您传递的str变量不是节点，它是一个字符串。首先尝试使用：

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

Answer 2

我无法理解您为什么要像在评论中所描述的那样动态创建和附加脚本。

您得到的错误是：

myDiv.appendChild（STR）;

但是appendChild需要第一个参数作为节点。

因此，如果你需要继续这个方向，你必须创建一个脚本节点元素，然后你可以像我的例子一样将它附加到html：

＆＃13;

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

＆＃13;

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

＆＃13;

动态地将jquery添加到div中

2 个答案: