<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="newList">
<!--<li>
<h1></h1>
<p></p>
</li>-->
</ul>
<script type="text/javascript">
//字面量形式定义的数组
//数组里面可以放任何的数据类型
var apple = '苹果'
var xueli = '雪梨'
// ...
var list = ['苹果','雪梨','香蕉','葡萄'] //构造函数定义数组 var list1 = new Array('苹果','雪梨','香蕉') var article1 = {
title:'特朗普访华',
content:'特朗普不靠谱'
}
var article2 = {
title:'习总请我吃饭',
content:'特朗普不靠谱'
}
var article3 = {
title:'明天六合彩开码信息',
content:'1234567'
}
var newList = [article1,article2,article3]
//1、这些数据是有相关性的
//2、这些相关性的数据有一些顺序 console.log(newList) var ul = document.querySelector('#newList') for(var i = 0;i<newList.length;i++){
var templi = document.createElement('li')//创建1个元素li
templi.innerHTML = '<h1>'+ newList[i].title +'</h1><p>'+ newList[i].content +'</p>'
ul.appendChild(templi)//添加创建的元素到ul
} </script>
</body>
</html>

js数组及动态插入节点数据的更多相关文章

  1. Sql [hierarchyid]类型如何动态插入层级数据

    [hierarchyid] 是个不错的数据类型,能够方便的操作树型结构,网上找了很多资料没找到如何做到动态插入节点的例子,只好从MSDN认真看了下资料写出了一个DEMO CREATE TABLE Em ...

  2. 数组的操作。1,JS数组去重。2,把数组中存在的某个值,全部找出来。3在JS数组指定位置插入元素。。。

    1,数组去重 let arr = [1,2,3,4,5,6,1,2,3,'a','b','a']; let temp = []; // 作为存储新数组使用 for(let i = 0; i < ...

  3. js中 ajax动态新增节点无法触发点击事件

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件. 其实最简单的方法就是直接在标签中写onclick="",但是这样写有些场景的是实现不了的,最 ...

  4. JS数组——冒泡、插入、快速排序

    前言:因为要对后端返回来的数据进行处理,之前之后冒泡,不够用,去看了插入跟快速,写下这篇笔记. 使用背景: 1.冒泡排序 数据比较少,小于1000 2.插入排序 数据比较少,大于1000不推荐 3.快 ...

  5. 小程序开发笔记(八)—Js数组按日期分组显示数据

    数据分组展示有两种方式,一种是后端直接传入分组格式的Json数据,另一种是我们在前端自己转换格式,这里我们在前端处理转换按日期分组的数据格式 1.例如后端返回数据格式为: [{createtime:' ...

  6. 在JS数组指定位置插入元素

    很多与数组有关的任务听起来很简单,但实际情况并不总是如此,而开发人员在很多时候也用不到他.最近我碰到了这样一个需求: 将一个元素插入到现有数组的特定索引处.听起来很容易和常见,但需要一点时间来研究它. ...

  7. JS把内容动态插入到DIV

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  8. Js 数组返回去重后的数据

    function removeRepeat(data) { var temp = ""; var mainData = []; for (var i = 0; i < dat ...

  9. js 给json添加新的字段,或者添加一组数据,在JS数组指定位置删除、插入、替换元素

    JS定义了一个json数据var test={name:"name",age:"12"};需要给test再添加一个字段,需要什么办法,可以让test的值为{na ...

随机推荐

  1. springboot + thymeleaf静态资源访问404

    在使用springboot 和thtmeleaf开发时引用静态资源404,静态资源结如下: index.html文件: <!DOCTYPE html> <html xmlns:th= ...

  2. Ubuntu 查看操作系统的位数

    查看Ubuntu操作系统的位数是32位还是64位,可以通过以下命令来查看: getconf LONG_BIT 返回32或64 :如图

  3. Python 正则re匹配中文、英式数字

    #coding:utf-8 import re s = u''' 或多或少的好好读书电锯惊魂20202 和水电费后是否会时候1212没收到风10.12海大富的是粉红色的和办法的1244525.000 ...

  4. @DateTimeFormat注解

    @DateTimeFormat在spring-context依赖下,所在包如下 当form表单中出现时间字段需要跟pojo对象中的成员变量进行数据绑定时,springmvc框架中的时间数据无法自动绑定 ...

  5. redis在mac上的下载安装

    redis官网下载压缩包: 在终端进入下载后的目录,然后: 解压:tar zxvf redis-5.0.5.tar.gz 移动到:sudo mv redis-5.0.5 /usr/local 切换到: ...

  6. .netCore+Vue 搭建的简捷开发框架 (4)--NetCore 基础 -2

    上节中,我们初步的介绍了一下NetCore的一些基础知识,为了控制篇幅(其实也是因为偷懒),我将NetCore 基础分为两部分来写. 0.WebAPI 项目的建立 1..NetCore 项目执行(加载 ...

  7. 02-05 scikit-learn库之线性回归

    目录 scikit-learn库之线性回归 一.LinearRegression 1.1 使用场景 1.2 代码 1.3 参数详解 1.4 属性 1.5 方法 1.5.1 报告决定系数 二.ARDRe ...

  8. bugku--web--输入密码查看flag

    首先打开网页链接 随机五位数的密码爆破,先用python写一个脚本来生成随机五位数: x=range(0,10) f=open("3.txt",'w') for i in x: f ...

  9. .netCore+Vue 搭建的简捷开发框架--目录

    .netCore+Vue 搭建的简捷开发框架 .netCore+Vue 搭建的简捷开发框架 (2)--仓储层实现和EFCore 的使用 .netCore+Vue 搭建的简捷开发框架 (3)-- Ser ...

  10. Python 爬虫 爬取 煎蛋网 图片

    今天, 试着爬取了煎蛋网的图片. 用到的包: urllib.request os 分别使用几个函数,来控制下载的图片的页数,获取图片的网页,获取网页页数以及保存图片到本地.过程简单清晰明了 直接上源代 ...