1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <ul id="newList">
  9.             <!--<li>
  10.                 <h1></h1>
  11.                 <p></p>
  12.             </li>-->
  13.         </ul>
  14.         <script type="text/javascript">
  15.         //字面量形式定义的数组
  16.         //数组里面可以放任何的数据类型
  17.             var apple = '苹果'
  18.             var xueli = '雪梨'
  19. //            ...
  20.             var list = ['苹果','雪梨','香蕉','葡萄']
  21.  
  22.             //构造函数定义数组
  23.  
  24.             var list1 = new Array('苹果','雪梨','香蕉')
  25.  
  26.             var article1 = {
  27.                 title:'特朗普访华',
  28.                 content:'特朗普不靠谱'
  29.             }
  30.             var article2 = {
  31.                 title:'习总请我吃饭',
  32.                 content:'特朗普不靠谱'
  33.             }
  34.             var article3 = {
  35.                 title:'明天六合彩开码信息',
  36.                 content:'1234567'
  37.             }
  38.             var newList = [article1,article2,article3]
  39.             //1、这些数据是有相关性的
  40.             //2、这些相关性的数据有一些顺序
  41.  
  42.             console.log(newList)
  43.  
  44.             var ul = document.querySelector('#newList')
  45.  
  46.             for(var i = 0;i<newList.length;i++){
  47.                 var templi = document.createElement('li')//创建1个元素li
  48.                 templi.innerHTML = '<h1>'+ newList[i].title +'</h1><p>'+ newList[i].content +'</p>'
  49.                 ul.appendChild(templi)//添加创建的元素到ul
  50.             }
  51.  
  52.         </script>
  53.     </body>
  54. </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. SpringCloud搭建注册中心与服务注册

    上一篇文章<微服务注册中心原理,看这篇就够了!>介绍了注册中心的概念和原理,本文将介绍下利用Eureka搭建中心并注册服务到注册中心的过程. 本文目录 一.Eureka介绍二.搭建注册中心 ...

  2. Javascript的基础

    ECMAScript(语法.标准) BOM(浏览器) DOM(网页) ECMAScript是一个标准,它规定了语法.类型.语句.关键字.保留子.操作符.对象.(相当于法律) BOM(浏览器对象模型): ...

  3. Redis数据库之数据基本管理操作

    了解并掌握各种数据类型的命令操作方式,以及各种数据类型值的操作方式.同时,熟练记忆列表.哈希.集合和有序集合等数据类型的常用操作命令.能根据指令格式完成相应的指令操作. ①string数据类型的练习 ...

  4. SpringBoot2+Netty打造通俗简版RPC通信框架

    2019-07-19:完成基本RPC通信! 2019-07-22:优化此框架,实现单一长连接! 2019-07-24:继续优化此框架:1.增加服务提供注解(带版本号),然后利用Spring框架的在启动 ...

  5. React antd如何实现<Upload>组件上传附件再次上传已清除附件缓存问题。

    最近在公司做React+antd的项目,遇到一个上传组件的问题,即上传附件成功后,文件展示处仍然还有之前上传附件的缓存信息,需要解决的问题是,要把上一次上传的附件缓存在上传成功或者取消后,可以进行清除 ...

  6. 【MySQL】mysql5.7数据库的安装和配置

    第一步:直接从官网下载安装包,.msi 可以直接点击安装..zip直接解压到目录,本人是C:\Program Files\MySQL\mysql-5.7 第二步:需要配置环境变量,我的电脑->属 ...

  7. bootstrap-table 页脚总计(自定义统计总数)

    •首先给table添加属性: showFooter: footer js代码如下: //初始化bootstrapTableinitBootstrapTable: function () { var o ...

  8. Web高性能动画及渲染原理（1）CSS动画和JS动画

    目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...

  9. KafkaStream简介

    Kafka Streams 1 概述 Kafka Streams是一个客户端程序库,用于处理和分析存储在Kafka中的数据,并将得到的数据写回Kafka或发送到外部系统.Kafka Stream基于一 ...

  10. .NET Core 3.0中IAsyncEnumerable<T>有什么大不了的?

    .NET Core 3.0和C# 8.0最激动人心的特性之一就是IAsyncEnumerable<T>(也就是async流).但它有什么特别之处呢?我们现在可以用它做哪些以前不可能做到的事 ...