手把手教你用js插入HTML元素
作者：IKUNzhenin
这段代码是一个有序列表（ordered list），使用<ol>标签包裹起来。有序列表中的每一项由<li>标签表示。
在这个例子中，有三个列表项：
目录 1
目录 2
目录 3
这段代码会渲染成一个有序列表，显示为：
目录 1
目录 2
目录 3
<ol> <li>目录 1</li> <li>目录 2</li> <li>目录 3</li> </ol> <button id="btn1">添加目录</button>
<script type="text/javascript">
let btn1=document.getElementById('btn1');
console.log(btn1);
let ol =document.getElementsByTagName('ol')[0];
let li=document.getElementsByTagName('li');
console.log(li);
btn1.onclick=function(){
ol.innerHTML+=`<li>追加目录4</li>`
}
</script>这段代码是一个JavaScript代码块，使用`<script>`标签包裹起来，并设置了`type="text/javascript"`。
这段代码执行了以下操作：
1. 使用`document.getElementById('btn1')`获取了一个id为"btn1"的元素，并将其赋值给`btn1`变量。
2. 使用`console.log(btn1)`将`btn1`变量输出到控制台，用于验证获取到的元素是否正确。
3. 使用`document.getElementsByTagName('ol')[0]`获取了所有的`<ol>`元素，并取得第一个元素赋值给`ol`变量。
4. 使用`document.getElementsByTagName('li')`获取了所有的`<li>`元素，并将其赋值给`li`变量。
5. 使用`console.log(li)`将`li`变量输出到控制台，用于验证获取到的元素是否正确。
6. 为`btn1.onclick`事件添加了一个函数。当点击`btn1`时，执行以下操作：
- 使用`ol.innerHTML+=`追加了一个包含文本"追加目录4"的`<li>`元素到`ol`元素中。
这段代码的作用是，当点击id为"btn1"的按钮时，在现有的有序列表中追加一个新的列表项，内容为"追加目录4"。
附：js 将html插入指定元素中
一定要先定义一个空的html。。。
一定要记得写#啊，#代表id,.代表class..
定义一个空html，一定要写在for循环外面，否则每次循环，html_same又被清空了..
<!-- 同类商品推荐 -->
<script type="text/javascript">
$(function(){
var my_role = $('#my_role').val();//一定要记得写#啊，#代表id,.代表class..
var data = {'role': my_role};
$.post(contextPath+'/SameProductController',data,'json').done(function(datas){
datas = JSON.parse(datas);
var html_same =''; //一定要写在for循环外面，否则每次循环，html_same又被清空了..
for(var i=0;i<datas.length;i++){
var product = datas[i];
var pic = 'img/'+product.product_img;
html_same +='<div>'
+ '<ul>'
+ '<li class="sel_detlmli">'
+ '<p class="sel_detlmlimg"><a href="#" rel="external nofollow" rel="external nofollow" >'
+ '<img src='+pic+' width="160" height="160" /></a></p>'
+ '<p class="sel_detlmlip"><a href="#" rel="external nofollow" rel="external nofollow" >名称：'+product.product_name+'</a></p>'
+ '<p class="sel_detlmlip">规格：'+product.product_standard+'</p>'
+ '<p class="sel_detlmlip">产品类型：'+product.product_type+'</p>'
+ '<p class="sel_detlmlip">厂家：'+product.product_producer+'</p>'
+ '</li>'
+ '</ul>'
+ '<div>'
}
$('#theSame').html(html_same);
}).fail(function(res){
});
});
</script>总结
到此这篇关于用js插入HTML元素的文章就介绍到这了,更多相关js插入HTML元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！