<html>

<head>

<meta charset="utf-8">

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

</script>

<script>

function appendText(){

    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本

    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本

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

    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM

    $("body").append(txt1,txt2,txt3);     // 追加新元素

}

</script>

</head>

<body>

<p>这是一个段落。</p>

<button onclick="appendText()">追加文本</button>

</body>

</html>

使用HTML、jquery、DOM创建文本的更多相关文章

  1. Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

    插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...

  2. jQuery EasyUI/TopJUI创建文本验证框（不写js,纯HTML实现!!!）

    jQuery EasyUI/TopJUI创建文本验证框(不写js,纯HTML实现!!!) validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改 ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. DOM（文本对象模型）简介

    DOM(文本对象模型)简介 在正式开始介绍jQuery处理XML前我们来了解一些必备的基础知识. DOM是HTML或者XML结构的一种展现形式,通过编程对DOM进行修改可以达到修改HTML/XML的目 ...

  5. 彻底抛弃PeopleEditor，SharePoint中利用Jquery Chosen创建新的人员选择器

    彻底抛弃PeopleEditor,SharePoint中利用Jquery Chosen创建新的人员选择器 基于SharePoint平台开发时,人员选择器使用频率是非常高的,但是原生的人员选择器使用太麻 ...

  6. jQuery DOM/属性/CSS操作

    jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...

  7. JQuery -- Dom操作， 示例代码

    1.内部插入节点 *   append(content) :向每个匹配的元素的内部的结尾处追加内容 *   appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 *   ...

  8. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  9. jQuery—DOM操作

    摘抄自<锋利的jQuery> 一.查找节点 1.查找元素节点 var li_txt = $li.text(); 2.查找属性节点 var p_txt = $para.attr(" ...

随机推荐

  1. JavaScript预编译过程理解

    1-JavaScript运行三部曲 语法分析 预编译 解释执行 语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误: 解释执行顾名思义便是执行代码了: 预编译简单理解就是在内存中开辟一些空间 ...

  2. springboot demo（二）web开发demo

    如入门般建立项目,引入依赖: <dependencies> <dependency> <groupId>org.springframework.boot</g ...

  3. Pycharm缺少环境变量+无法获取libcudnn.so.6

    在终端输入: echo LD_LIBRARY_PATH, 并将其内容 添加至Pycharm的 run -> Edit configuration -> Environment variab ...

  4. js sort tricks All In One

    js sort tricks All In One js 排序技巧 const arr = [ { label: 'False 1 ', disabled: false, }, { label: 'F ...

  5. How To Install Linux & Nginx & MySQL & PHP (LEMP) stack on Raspberry Pi 3,Raspberry Pi 3,LEMP,Nginx,PHP, LEMP (not LNMP)

    1.   How To Install Linux & Nginx & MySQL & PHP (LEMP) stack on Raspberry Pi 3         R ...

  6. CSS3 弹性盒子(Flex Box)

    1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...

  7. web online code editor All In One

    web online code editor All In One 在线代码编辑器 Monaco Editor 摩纳哥编辑器 ️ 22.1k The Monaco Editor is the code ...

  8. PIP & Python packages management

    PIP & Python packages management $ python3 --version # OR $ python3 -V # Python 3.7.3 $ pip --ve ...

  9. bash shell cli tools

    bash shell cli tools before # create files $ mkdir app-component $ cd app-component $ touch index.ht ...

  10. NGK和USDN的应用

    一．NGK和USDN的发展方向 目前区块链将会朝着两个方向去发展,第一种是金融经济的衍生品,第二种是商业应用,快速支付的货币体系,NGK.IO公链是基于分布式应用设计的商用金融区块链操作系统,通过数字 ...