第一种：使用 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. xgboost的遗传算法调参

    遗传算法适应度的选择: 机器学习的适应度可以是任何性能指标 —准确度,精确度,召回率,F1分数等等.根据适应度值,我们选择表现最佳的父母(“适者生存”),作为幸存的种群. 交配: 存活下来的群体中的父 ...

  2. BCGcontrolBar(五) 对话框大小改变控件自动适应

    改变控件大小 首先在 构造函数中加入 EnableLayout(); 在OnInitDialog()函数中加入 CBCGPStaticLayout* pLayout = (CBCGPStaticLay ...

  3. 显示器如何显示一个YUV422格式的图形

    记录在开发过程中对知识点的一些理解: 在开发渲染程序的过程中,需要对视屏文件进行解码解码后特效文件的叠加,使用的技术是(FFmpeg+DirectX) 解码出来的视屏数据格式是YUYV,使用Direc ...

  4. Centos7下单机部署Solr7.3

    本章重点介绍CentOS7 下部署Solr7 ,添加核心Core配置,Dataimport导入,中文分词的相关操作. 一.准备工作     演示环境是在虚拟机下安装的CentOS7.java JDK8 ...

  5. Python之函数——进阶篇

    嵌套函数 ---函数内部可以再次定义函数 ---函数若想执行,必须被调用 注意,下例中,执行结果为什么? age = 19 def func1(): print(age) def func2(): p ...

  6. vb 读取指定路径文件名

    Private Sub ExportCostSheetData() InsertRow("") InsertRow("Run 2:Export CostingSheet= ...

  7. idea中创建多module的maven工程

    以前自学Java web的时候,我们都是创建一个web工程,该工程下面再创建dao.service.controller等包.自从工作以后,我们会发现现在的web项目包含多个module,contro ...

  8. as3 三行三列 布满9个为一个界面

    var n:int=int(iconIndex/3); e.x =(int(n/3)*3+iconIndex%3)*557; e.y = int(iconIndex / 3) % 3 * 260; i ...

  9. Linux下基于官方源代码RPM包构建自定义MySQL RPM包

    rpmbuild时不要以root用户执行! 方法一: 1.首先安装rpmbuild #yum install rpm-build gcc gcc-c++ cmake bison ncurses-dev ...

  10. Data Guard 介绍