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. xcode添加build phase

    [xcode添加build phase] xcode版本:5.0.2,找了半天,终于找到add build phase的方法,如下图.

  2. Windows 环境下于虚拟环境中源码安装 cx_oracle

    安装前提条件: (1).安装 instantclient-basic-nt (2).安装 instantclient-sdk-nt (3).安装 Microsoft Visual C++ Compil ...

  3. 04.webservice客户端调用

    不要求所有的元素都理解,真正做开发的时候,有一些必须是要用的. 以后我们做开发的时候服务访问点的集合就一个服务的访问点.服务访问点绑定了具体的一个服务类,绑定的这个东西它本身也是一个元素.往上找,四个 ...

  4. __sync_fetch_and_add系列

    __sync_fetch_and_add系列一共有十二个函数,有加/减/与/或/异或/等函数的原子性操作函数,__sync_fetch_and_add,顾名思义,先fetch,然后自加,返回的是自加以 ...

  5. iOS与HTML5交互方法总结(修正)

    摘要 看了不少别人写的博客或者论坛,关于iOS与HTML5交互方法大概主要有5种方式: 1. 利用WKWebView进行交互(系统API) 2. 利用UIWebView进行交互(系统API) 3. 苹 ...

  6. 重置CentOS6.5的登录口令

    早先在虚拟机Vmware里安装了一台CentOS6.5,现在想登录,发现无论怎么输入登录口令都不正确,以至于无法登录. 查阅网上资料,可用下面步骤里的方法重置登录口令,在此记录. 1.启动机器,出现下 ...

  7. 面试题:hibernate 有用

    1． Hibernate的工作流程? 答案: 1.通过Configuration对象读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory对象 3.打开session 4.创建事 ...

  8. RocketMq2

  9. Oracle数据库之日期函数

    今天给大家介绍一下oracle数据中的日期函数的用法.废话不多说,我们看一下oracle给我们提供了那些函数? 1.sysdate 用途:获取当前系统时间. 2.to_date('字符类型','日期类 ...

  10. ADB常用命令简洁版整理

    ADB全称Android Debug Bridge ,“安卓调试桥梁”连接Android和电脑通信的桥梁.  市面上常见的手机助手,底层调研的都是ADB命令行. C/S架构命令行工具,客户端和服务端都 ...