动态创建新的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. location修改的时候报错解决办法

    location修改的时候直接保存record,或者转换成DbObject都会报错,这样准换之后就好了if(key.equals("location")&&valu ...

  2. C# lesson3

    一.局部变量和成员变量 1.程序入口(Main)要调用非静态成员(变量或方法)的话,是需要通过对象去调用的: 2.普通方法里面去调用变量或方法的话可以直接调用 成员变量(全局变量):放在Main方法之 ...

  3. 第三天 函数 三元运算 lambda表达式 内置函数 文件操作

    面向过程: 直接一行一行写代码,遇到重复的内容复制黏贴. 不利于代码阅读 代码没有复用 面向对象 将代码块定义为函数,以后直接调用函数 增强了复用性 函数的定义方法 def 函数名(传递参数): 函数 ...

  4. php 5.5 xhprof for windows

    今天看到一个好的性能优软件xhprof(有facebook开发的类库)在国内找了很多网站都没有找到相关php5.5的扩展,只好FQ还是外面的世界精彩一下就找到了link (http://windows ...

  5. JS实现点击弹出对应的索引

    如果这样写的话 ,弹出来一直是2,原因 这个i ,循环已经结束,i 的值已经是2了,所以需要再前面添加: items[i].index=i;    //添加一个属性  ,技术一下 这个索引值 aler ...

  6. django+nginx+uwsgi 部署配置

    django官方文档在这 https://docs.djangoproject.com/en/1.9/howto/deployment/wsgi/uwsgi/ 第一步:先收集静态文件 之前要先设置 S ...

  7. POJ 2313 Sequence#贪心

    (-￣▽￣)-* 找规律 //初始化为B[i]=A[i] //然后由V=|A[1]-B[1]|+|A[2]-B[2|+|A[3]-B[3]| // +|B[1]-B[2]|+|B[2]-B[3]| / ...

  8. 设计模式 装饰模式(Decorator)

    设计模式 装饰模式(Decorator) @author ixenos 装饰模式是什么 1.装饰模式以对客户端透明的方式对象的功能,是继承关系的一个替代方案,但装饰模式可以在不创造更多子类的情况下,对 ...

  9. 去除VisualStudio中拼写错误检测的红色波浪线

    去除VisualStudio中拼写错误检测的红色波浪线 在Visual Assistant中将 Underline spelling errors in comments and strings us ...

  10. Openjudge-计算概论（A）-年龄与疾病

    描述: 某医院想统计一下某项疾病的获得与否与年龄是否有关,需要对以前的诊断记录进行整理. 输入共2行,第一行为过往病人的数目n(0 < n <= 100),第二行为每个病人患病时的年龄.输 ...