动态创建新的DOM元素，是JavaScript操作网页对象模型的重要手段之一

代码：

<!DOCTYPE html>

<html>

    <head>

        <title>创建新元素</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <script type="text/javascript">

            //创建新元素

            function createNewElements(){

                //使用innerHTML创建新元素

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

                //设置innerHTML内容

                p1.innerHTML = "<span>我的dom文本1</span>";

                //使用createElement来创建新元素

                var span = document.createElement("span");

                //为新元素内容创建一个文本节点

                span.appendChild(document.createTextNode("我的dom文本2"));

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

                //挂接

                p2.appendChild(span);

            }

        </script>

    </head>

    <body style="text-align:center">

        <p>

            <input type="button" value="创建新元素" onclick="createNewElements();"/>

        </p>

        <!-- 定义为新元素挂接的容器元素 -->

        <p id="p1"></p>

        <p id="p2"></p>

    </body>

</html>

解析：

创建新元素，一般来说有两种方法：第一种是直接修改父元素的innerHTML元素；第二种是使用createElement()函数创建，再用appendChild()函数进行DOM元素的挂接。

第一种方法使用起来比较简单，也很好理解，但是需要修改整个父元素所包含的HTML内容，如果父元素原先就包含了一些HTML内容，再进行DOM挂接的话，再进行DOM挂接的话，执行效率比较低。

第二种方法相对比较灵活，效率也相对较高，只是使用起来复杂一些。

DOM操作-动态创建网页元素的更多相关文章

  1. 用jQuery绑定事件到动态创建的元素上

    jQuery最常用的一个功能就是对DOM的操作,与之相关的比如对事件的绑定和Ajax动态内容加载.当我们绑定事件到Ajax load回来的内容上或其他动态创建的元素上时会发现事件没响应,和你预想的结果 ...

  2. jQuery 绑定事件到动态创建的元素上

    在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...

  3. jquery动态创建页面元素

    jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...

  4. 基于jQuery动态创建html元素

    在做web前端开发的时候,经常遇到一些数据多少或则类型不能在运行之前就确定下来的情况,此时,数据的展示,就要借助于动态创建html元素来展示了. 常见的动态创建HTML元素的方式,有如下几种,大体都差 ...

  5. jquery 动态创建的元素，绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  6. 动态创建html元素的几种方法

    可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到数组中,再遍历数组动态创建html元素 3.使用模版   □ 使用jQuery动态创建元素追加到jQ ...

  7. jQuery动态创建html元素的常用方法汇总

    在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到 ...

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

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

  9. DOM操作，控制HTML元素 （原生JS）

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HTM ...

随机推荐

  1. Oracle跨库访问数据表-DBLINK

    1:创建DBLINK(USING后面的连接字符串就是要访问的那个数据库的连接字符串) CREATE DATABASE LINK linkName CONNECT TO userName IDENTIF ...

  2. 101个Linq例子(40-60)

    GroupBy - Simple 2 public void Linq41() { string[] words = { "blueberry", "chimpanzee ...

  3. C++编程技巧（长期更新）

    1.数组使用 int* p = new int[5](); // 数组新建并全部初始化为0 等价于: int* p; p = new int[5](); int* q = new int[5];    ...

  4. jquery点击选中，再次点击取消选中

    if(!$(this).hasClass("current")){ $(this).addClass("current"); }else{ $(this).re ...

  5. python报错Could not open PYTHONSTARTUP

    root@liqian-python:/pythonShare/monitor/m_server/core# pythonPython 2.7.10 (default, Oct 14 2015, 16 ...

  6. Node.js API

    Node.js v4.4.7 Documentation(官方文档) Buffer Prior to the introduction of TypedArray in ECMAScript 2015 ...

  7. 用VB把xlsx转换为xls

    Sub Test()Dim wb As Workbook, mPath As String, f As StringApplication.DisplayAlerts = FalseApplicati ...

  8. Struts2 stracture

  9. [转]URL的解析，C语言实现

    http://blog.csdn.net/cuishumao/article/details/10284463 一 说明(1)应用情况:比如基于socket来实现http协议等,这时候就需要解析URL ...

  10. 深度分析如何在Hadoop中控制Map的数量

    深度分析如何在Hadoop中控制Map的数量 guibin.beijing@gmail.com 很多文档中描述,Mapper的数量在默认情况下不可直接控制干预,因为Mapper的数量由输入的大小和个数 ...