1.通过CreateTextNode文本节点

首先创建该元素（元素节点），然后向一个已存在的元素追加该文本节点

<!DOCTYPE html>

<html>

<body>

<div id="div1">

　　<p id="p1">这是一个段落。</p>

　　<p id="p2">这是另一个段落。</p>

</div>

<script>

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

var newText=document.createTextNode("这是新段落。");

newEle.appendChild(newText);

var element=document.getElementById("div1");

element.appendChild(newEle);　　//追加的元素在div容器内

</script>

</body>

</html>

2.通过innerHTML属性

<!DOCTYPE html>

<html>

<body>

<div id="div1">

    <p id="p1">这是一个段落。</p>

    <p id="p2">这是另一个段落。</p>

</div>

<script>

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

    newEle.innerHTML="new paragraph";  //innerText也可用

    var element=document.getElementById("div1");

    element.appendChild(newEle);   //追加的元素在div容器内
</script> </body> </html>

3.通过替换某元素的文本内容:innerHTML与CreateTextNode结合实现追加文本内容

 <!DOCTYPE html>

 <html>

 <body>

 <div id="div1">

     <p id="p1">这是一个段落。</p>

     <p id="p2">这是另一个段落。</p>

 </div>

 <script>

 //添加的第一个文本(多次覆盖内容)

 var newEle=document.getElementsByTagName("p");

 newEle[0].innerHTML="new paragraph";  //输出结果:new paragraph

 //添加的第二个文本(可追加内容多次)

 var newText2 = document.createTextNode(" hello world");

 newEle[0].appendChild(newText2);

 //输出结果:new paragraph hello world

 </script>

 </body>

 </html>

原生js动态创建文本内容的几种方式的更多相关文章

  1. HTML创建文本框的3种方式

    我的第一个随笔,记录主要用来整理学习的知识点 1.input 创建单行文本框 <input type="text" size="10" maxlength ...

  2. 原生js动态创建、获取、删除属性的几种方式

    1.创建属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  3. hibernate动态创建数据库表名几种方式

    数据库中数据量很大, 但又不可以删除时同时又要优化程序检索数据时间. 答:方式有很多比如 创建数据库表分区,创建索引, 存储过程等; 我这里采用动态创建数据库表的方式. 完全可以在不创建表分区情况下实 ...

  4. 原生js实现选项卡样式切换的几种方式。

    先分享一个不能实现的实例(因为es5没有块作用域) for(var i=0; i<list.length; i++ ) { list[i].onclick = function(){ tabch ...

  5. 《DOM Scripting》学习笔记-——第七章 动态创建html内容

    本章内容: 1.动态创建html内容的“老”技巧:document.write()和innerHTML属性 2.DOM方法:createElement(),creatTextNode(),append ...

  6. js动态创建样式: style 和 link

    js动态创建样式: style 和 link ie6 不能 document.createElement('style') 然后append到head标签里.所以就找到这样个好文章 有很多提供动态创建 ...

  7. 给js动态创建的对象绑定事件

    1.使用原生JS动态为动态创建的对象绑定事件 1-1.创建一个function,用来兼容IE8以下浏览器添加事件 function addEvent(el, type, fn) {  if(el.ad ...

  8. UEditor js动态创建和textarea中渲染【原】

    UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...

  9. iOS 动态计算文本内容的高度

    关于ios 下动态计算文本内容的高度,经过查阅和网上搜素,现在看到的有以下几种方法: 1. //  获取字符串的大小  ios6 - (CGSize)getStringRect_:(NSString* ...

随机推荐

  1. Java内部类的使用小结 形参为什么要用final

    部类是指在一个外部类的内部再定义一个类.类名不需要和文件夹相同. *内部类可以是静态static的,也可用public,default,protected和private修饰.(而外部顶级类即类名和文 ...

  2. 虚拟化（三） -vsphere套件的安装注意及使用

    https://www.cnblogs.com/zhrngM/p/9547958.html [转]虚拟化(三):vsphere套件的安装注意及使用 vsphere套件里面主要的组件有esxi.vcen ...

  3. Python函数编程——闭包和装饰器

    Python函数编程--闭包和装饰器 一.闭包 关于闭包,即函数定义和函数表达式位于另一个函数的函数体内(嵌套函数).而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量.参数.当其中一个 ...

  4. spring boot整合kafka

    最近项目需求用到了kafka信息中间件,在此做一次简单的记录,方便以后其它项目用到. 引入依赖 <dependency> <groupId>org.springframewor ...

  5. 「小技巧」使用Git从其他分支merge个别文件

    小明发现在实际项目开发过程中,总会遇到各种各样的情况,比如一个大型的项目或版本迭代可能不是一次上线,可能会分好几次上线,这时候就会涉及创建多个分支,分别开发. 项目背景 产品经理:我们本次开发三个功能 ...

  6. rabbitmqctl: Error unable to connect to node 'rabbit@xxxxx' nodedown

    RabbitMQ使用rabbitmqctl add_user的时候报以下错误: Creating user "xxxx" ... Error: unable to connect ...

  7. Kubernetes监控实践

    一.Kubernetes介绍 Kubernetes(K8s)是一个开源平台,能够有效简化应用管理.应用部署和应用扩展环节的手动操作流程,让用户更加灵活地部署管理云端应用. 作为可扩展的容错平台,K8s ...

  8. Swoole入门到实战 打造高性能 赛事直播平台（完整版）

    Thinkphp+Swoole入门到实战打造高性能赛事直播平台 第1章 课程介绍 欢迎大家来到swoole的课程!本章主要是介绍了swoole的一些特性,以及使用场景,并且分享了swoole在其他公司 ...

  9. [AI] 深度数据 - Data

    Data Engineering Data  Pipeline Outline [DE] How to learn Big Data[了解大数据] [DE] Pipeline for Data Eng ...

  10. koa和exprsss区别

    koa和exprsss区别 koa没有内置中间件 express有几个内置的中间件,如express.static()//加载静态资源 koa不再有req,res请求,它是封装在context里面 c ...