jQuery执行脚本，在指定的div添加（附加）html代码

最新推荐文章于 2023-07-31 16:59:38 发布

dusea

最新推荐文章于 2023-07-31 16:59:38 发布

阅读量1.2w

点赞数

本文链接：https://blog.csdn.net/dusea/article/details/48439611

版权

jQuery中需要执行指定的js代码方法

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script> 
<div id="dictionary"> 
</div> 
<div class="letters"> 
  <div class="letter" id="letter-a"> 
    <h3><a href="entries-a.html">A</a></h3> 
  </div> 
  <div class="letter" id="letter-b"> 
    <h3><a href="entries-a.html">B</a></h3> 
  </div> 
  <div class="letter" id="letter-c"> 
    <h3><a href="entries-a.html">C</a></h3> 
  </div> 
  <div class="letter" id="letter-d"> 
    <h3><a href="entries-a.html">D</a></h3> 
  </div> 
  <!-- and so on --> 
</div> 

</head>
<body >
<script>
$(document).ready(function() { 
  $('#letter-c a').click(function(event) { 
    event.preventDefault(); 
    $.getScript('c.js'); 
  }); 
}); 
</script>
</body>
</html>

将写好的c.js文件放置同一个目录下面

var entries = [ 
  { 
    "term": "CALAMITY", 
    "part": "n.", 
    "definition": "A more than commonly plain and..." 
  }, 
  { 
    "term": "CANNIBAL", 
    "part": "n.", 
    "definition": "A gastronome of the old school who..." 
  }, 
  { 
    "term": "CHILDHOOD", 
    "part": "n.", 
    "definition": "The period of human life intermediate..." 
  } 
  //省略的内容 
]; 
 
var html = ''; 
 
$.each(entries, function() { 
  html += '<div class="entry">'; 
  html += '<h3 class="term">' + this.term + '</h3>'; 
  html += '<div class="part">' + this.part + '</div>'; 
  html += '<div class="definition">' + this.definition + '</div>'; 
  html += '</div>'; 
}); 
 
$('#dictionary').html(html);
//$('#dictionary').append(html);

这里的$('#dictionary').html(html);可以直接将需要的代码放入到指定的div内 (<div id="dictionary">)

也可以通过$('#dictionary').append(html);将代码附加到指定的div内 (<div id="dictionary">)

dusea

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery执行脚本，在指定的div添加（附加）html代码

jQuery中需要执行指定的js代码方法 A B C D $(document).ready(function() { $('#letter-c a').click(function(event) { event.preventDefa
复制链接

扫一扫