第一种：使用 parent.appendchild()方法

HTML页面
<div id="div1"></div>
JS文件
        //第一步创建标签元素节点

        var elem=document.createElement("p");

        //第二步创建文本节点

        var content=document.createTextNode("Hello,BigSpinach!");

        //第三步将文本添加到所创建的标签中

        elem.appendChild(content);

        //第四步，将创建的元素添加到页面中

        document.getElementById("div1").appendChild(elem);
显示结果

第二种：使用innerHTML="html代码段"

HTML页面
<div id="div2"></div>
JS文件
 document.getElementById("div2").innerHTML="<p>hello div2！</p>";
显示结果

第三种：使用document.write("html代码段")的方法

HTML页面
<body></body>
JS文件
 document.write（"<p>hello div3！</p>"）;
显示结果

页面会打印出 hello div3！

第四种：使用jQuery创建HTML元素

HTML页面
 <div id="div4"></div>
JS文件
        //第一步：创建页面元素

        var $p=$("<p></p>");

        //第二步：设置属性和值

        $p.attr("name","250");

        //第三步：设置文本

        $p.text("hellow div4！");

        //第四步： 将创建的元素添加到指定位置

        $("#div4").append($p);
显示结果

创建HTML元素的方法的更多相关文章

  1. js创建svg元素的方法

    需要JQuery <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. 原生JS和jQuery创建元素的方法

    jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1& ...

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

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

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

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

  5. jqueyr获取动态创建的元素

    javascript代码是按照代码顺序执行的,所以如果你用某个元素的click事件创建一个元素,id为test,然后在下面$("#test")是无法选择到的. 正确的方法是将在cl ...

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

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

  7. js动态创建的元素绑定事件

    新创建的元素用传统的办法无法绑定,需要用live方法. 例: $('.rule').live('mouseover', function () { $(this).addClass("can ...

  8. 创建删除元素appendChild,removeChild,createElement,insertBefore

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  9. jquery动态创建页面元素

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

随机推荐

  1. oracle 11g RAC 的一些基本概念（三）

    Grid Infrastructure共享组件   Grid Infrastructure使用两种类型的共享设备来管理集群资源和节点:OCR(Oracle Cluster Registry)和表决磁盘 ...

  2. 了解vue

    什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 状态,其实指的是实例之间的 ...

  3. html：模板

    http://www.mycodes.net/code_previewmap.php?id=3461 http://www.17sucai.com/pins/4120.html  欧美风格的CMS企业 ...

  4. CUDA C Programming Guide 在线教程学习笔记 Part 10【坑】

    ▶ 动态并行. ● 动态并行直接从 GPU 上创建工作,可以减少主机和设备间数据传输,在设备线程中调整配置.有数据依赖的并行工作可以在内核运行时生成,并利用 GPU 的硬件调度和负载均衡.动态并行要求 ...

  5. centos7配置yum源

    https://www.cnblogs.com/renpingsheng/p/7845096.html

  6. 23.OGNL与ValueStack(VS)-调用普通类的构造方法

    转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 建立一个新的类:Student,在此省略代码. 然后在loginSuc.js ...

  7. 使用django + celery + redis 异步发送邮件

    参考:http://blog.csdn.net/Ricky110/article/details/77205291 环境: centos7  +  python3.6.1 + django2.0.1  ...

  8. 让apache支持htaccess文件

    第一:检测 apache是否开启mod_rewrite 通过php提供的phpinfo()函数查看环境配置,在"apache2handler -> Loaded Modules&quo ...

  9. 进程队列(Queue)，Pipe（管道）， Manager 进行进程之间的数据传递和传输

    进程Queue,实现进程传输的队列 1.Queue from multiprocessing import Process, Queue def f(q): q.put('1') q.put('2') ...

  10. CentOS 7 Tomcat安装

    官网: http://tomcat.apache.org/download-80.cgi 下 1.载zip包 >wget http://mirrors.hust.edu.cn/apache/to ...