1、动态创建元素一 document.write()

　　例如向页面中输出一个 li 标签

<pre class="html" name="code"><span style="font-size:12px;"><script>

  document.write("<li>123</li>");

</script></span>

　　body标签中就会插入但是这种方法几乎不用，因为这回影响页面的布局，甚至会将页面原来的内容冲刷掉，从而只显示输出内容

2、动态创建元素二 innerHTML

<span style="font-size:12px;"><body>

<div id="box"></div>

<script>

  var box = document.getElementById("box");

  box.innerHTML = "<p>这是p标签</p>";

</script>

</body></span>

　　div标签中就会插入一个p标签，并在在页面上输出“这是标签”，当需要添加的标签比较多的时候使用这种方式。

3、动态创建元素三 document.createElement()

<span style="font-size:12px;"><body>

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

<script>

  var divobj = document.getElementById("div"); var li = document.createElement("li"); //创建一个li标签 li.innerHTML = "123"; //给li标签赋值
divobj.appendChild(li); //将创建好的li标签追加到box标签中 </script> </body></span>

　　div标签下面就会创建了一个li标签，当需要动态创建的标签比较少的时候就使用这种方式

JS 创建元素的三种方法的更多相关文章

  1. JS创建数组的三种方法

    1     常规方式 创建数组并给数组元素赋值 var myCars = new Array(); myCars[0] = "Saab"; myCars[1] = "Vo ...

  2. js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理

    动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...

  3. JS动态创建元素（两种方法）

    前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...

  4. java创建线程的三种方法

    这里不会贴代码,只是将创建线程的三种方法做个笼统的介绍,再根据源码添加上自己的分析. 通过三种方法可以创建java线程: 1.继承Thread类. 2.实现Runnable接口. 3.实现Callab ...

  5. javascript 获取html元素的三种方法

    操作HTML元素 你首先找到该元素. 三种方法来做这件事: 通过id找到HTML元素 通过标签名找到HTML元素 通过类名找到HTML元素 通过id查找HTML元素 在DOM中查找HTML元素的最简单 ...

  6. 《Java多线程面试题》系列-创建线程的三种方法及其区别

    1. 创建线程的三种方法及其区别 1.1 继承Thread类 首先,定义Thread类的子类并重写run()方法: package com.zwwhnly.springbootaction.javab ...

  7. cocos2dx中创建动画的三种方法

    1.最最原始的方法,先创建动画帧,再创建动画打包(animation),再创建动画(animate) 第一步: 创建动画帧:CCSpriteFrame,依赖于原始的资源图片(xx.png,xx.jpg ...

  8. CSS围住浮动元素的三种方法

    浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...

  9. Java并发编程（二）创建线程的三种方法

    进程与线程 1.  进程 进程和代码之间的关系就像音乐和乐谱之间的关系一样,演奏结束的时候音乐就不存在了但乐谱还在:程序执行结束的时候进程就消失了但代码还在,而计算机就是代码的演奏家. 2. 线程 线 ...

随机推荐

  1. java游戏制作之水果忍者

    水果忍者的原理很简单,主要就是采用随机的方式是画面上面出现水果. package Fruitninja; import java.awt.Dimension; import java.awt.Grap ...

  2. JAVA基础知识总结17（网络编程）

    端口: 物理端口:IP地址 逻辑端口:用于标识进程的逻辑地址,不同进程的标识:有效端口:0~65535,其中0~1024系统使用或保留端口. JAVA中ip对象:InetAddress. import ...

  3. ASP.NET MVC 和 WebForm的权限控制

    今天主要讲一下对于ASP.NET的页面级权限控制 数据结构:用户表.角色表.权限表.角色权限派生表 为用户添加权限的数据配置后, 自定义类对MVC继承Controller 对其内置方法Initiali ...

  4. Codeforces 1109D (树的计数问题）

    思路看这篇博客就行了:https://www.cnblogs.com/zhouzhendong/p/CF1109D.html, 讲的很好 今天学到了prufer编码,这是解决树上计数问题的一大利器,博 ...

  5. 【微信公众平台开发】微信JS-SDK开发，信公众平台js-sdk

    根据微信开发文档步骤如下: 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. JS接口安全域名设置 mi.com(前面不用带www/http,域名必须备案过)   2 ...

  6. while循环 for循环的理解

    不管是while循环还是for循环都隐含着一个if else的结构,就是说,if 条件满足,那么就执行循环体内部的语句,else就做循环体外部的事情. 有一个例子我觉得特别典型,程序内部定义了一个特定 ...

  7. CodeForces 489E Hiking (二分+DP)

    题意: 一个人在起点0,有n个休息点,每个点有两个数值,分别表示距离起点的距离xi,以及所获得的愉悦值bi,这个人打算每天走L距离,但实际情况不允许他这么做.定义总体失望值val = sum(sqrt ...

  8. [算法基础]Big O Notation时间复杂度计算方法

    首先一点就是无视任何常量 从最简单的开始 statement; 这段时间复杂度为常数1,所以O(1). 然后 ; i < N; i++ ) statement; 这一段是线性的,则时间复杂度为N ...

  9. LibreOJ 6278 数列分块入门 2(分块)

     题解:非常高妙的分块,每个块对应一个桶,桶内元素全部sort过,加值时,对于零散块O(sqrt(n))暴力修改,然后暴力重构桶.对于大块直接整块加.查询时对于非完整块O(sqrt(n))暴力遍历.对 ...

  10. POJ - 2965 The Pilots Brothers' refrigerator(压位+bfs)

    The game “The Pilots Brothers: following the stripy elephant” has a quest where a player needs to op ...