求助如何使用js向div追加html代码

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了求助如何使用js向div追加html代码相关的知识,希望对你有一定的参考价值。

参考技术A

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

用js实现点击按钮 显示div 然后两秒后消失 但是只能执行一次 怎么才能做到可以重复调用 求助

用js实现点击按钮 显示div 然后两秒后消失 但是只能执行一次 怎么才能做到可以重复调用 求助设置settimeout让他消失 但是只能用一次

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="aaa" style="display: none;">
这是隐藏内容
</div>
<button id="but">点击显示</button>
<script type="text/javascript">
$('#but').click(function()
$("#aaa").css('display','block');

setTimeout(function()
$("#aaa").css('display','none');
,2000);
)
</script>
</body>
</html>

参考技术A 如果你用jQuery可以很容易的实现重复的效果。

JS的话,你可以设置一个变量例如x。
初始值是x=0,每当鼠标点击按钮一次,x就加1,然后判断,当x为奇数时,div隐藏,当x为偶数时x显示。

以上是关于求助如何使用js向div追加html代码的主要内容,如果未能解决你的问题,请参考以下文章

java script 向指定html元素追加内容

求助:如果使用js\jq 控制一个div 当滚动到页面顶部的时候固定在顶部,离开可继续滚动

js如何根据id删除数组数据,并动态更新这个div?

强烈求助!!JS 动态循环创建DIV

JQuery如何向某个元素后面动态追加元素

高分求助:如何让html静态页面的源代码被,js代码屏蔽