JS插入html代码

HTML部分

<div id="testdiv"></div>

JS部分

方法一:

window.onload = function() {
  var testdiv = document.getElementById("testdiv");
  testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>";
}

注:

var   a ="<p>I inserted <em>this</em> content.</p>"

若html中有双引号  则用单引号引出

var a='...'


方法二:

window.onload = function() {
  var para = document.createElement("p");
  var txt1 = document.createTextNode("I inserted ");
  var emphasis = document.createElement("em");
  var txt2 = document.createTextNode("this");
  var txt3 = document.createTextNode(" content.");
  para.appendChild(txt1);
  emphasis.appendChild(txt2);
  para.appendChild(emphasis);
  para.appendChild(txt3);
  var testdiv = document.getElementById("testdiv");
  testdiv.appendChild(para);
}

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是将CSS和JavaScript代码插入HTML中的完整代码: ``` <!DOCTYPE html> <html> <head> <title>轮播图</title> <style> .slider { position: relative; overflow: hidden; } .slides { list-style: none; margin: 0; padding: 0; position: relative; } .slides li { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; } .slides li.active { opacity: 1; } .nav { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .prev, .next { display: inline-block; margin-right: 10px; padding: 10px; border: 1px solid #ccc; cursor: pointer; } .dots { display: inline-block; margin: 0; padding: 0; } .dot { display: inline-block; width: 10px; height: 10px; margin-right: 5px; background-color: #ccc; border-radius: 50%; cursor: pointer; } .dot.active { background-color: #000; } </style> </head> <body> <div class="slider"> <ul class="slides"> <li><img src="img1.jpg"></li> <li><img src="img2.jpg"></li> <li><img src="img3.jpg"></li> </ul> <div class="nav"> <span class="prev">Prev</span> <ul class="dots"> <li class="dot active"></li> <li class="dot"></li> <li class="dot"></li> </ul> <span class="next">Next</span> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { // 初始化 var currentSlide = 0; var slider = $('.slider'); var slides = slider.find('.slides li'); var dots = slider.find('.dots li'); var interval; // 自动播放 function startSlider() { interval = setInterval(function() { goToSlide(currentSlide + 1); }, 5000); } function stopSlider() { clearInterval(interval); } function goToSlide(index) { if (index >= slides.length) { index = 0; } else if (index < 0) { index = slides.length - 1; } slides.removeClass('active').eq(index).addClass('active'); dots.removeClass('active').eq(index).addClass('active'); currentSlide = index; } // 手动切换 slider.on('click', '.prev', function() { goToSlide(currentSlide - 1); }); slider.on('click', '.next', function() { goToSlide(currentSlide + 1); }); // 轮播点导航 dots.on('click', function() { var index = $(this).index(); goToSlide(index); }); // 开始自动播放 startSlider(); // 停止自动播放 slider.on('mouseenter', function() { stopSlider(); }); slider.on('mouseleave', function() { startSlider(); }); }); </script> </body> </html> ``` 注意:需要在页面中引入jQuery库。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值