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. 时间复杂度big-O、Big-Omega和big-Theta

    我们有三种曲线:   A curve that we know is "above" the running time function when n is large. ( Bi ...

  2. 为什么有的编程规范要求用 void 0 代替 undefined

    Undefined Undefined 类型表示未定义,它的类型只有一个值,就是 undefined. 任何变量在被赋值前它的值都是 undefined,但是在 JavaScript 引擎中,unde ...

  3. ViewGroup和View

    ViewGroup本身表示容器, 他是View的一个抽象子类, 它可以包含很多个普通的view组件,另外它还可以包含一个ViewGroup容器. 由于它是一个抽象类,所以实际使用中通常使用viewGr ...

  4. 关于解决web编码问题的总结

    网页的编码问题,一般分为两个方面 1 是网页本身的编码格式, 一般不同的操作系统网页文件存取的编码是不一样的, 但一般来说, 新建网页文件一般都和IDE有关,因为我们平时我是使用编辑工具新建网页文件. ...

  5. 04： OpenGL ES 基础教程03 纹理

    前言 1:常用类: 1:纹理的作用 正文 一:常用类 上下文 顶点数据缓存 着色器 baseEffect 一:纹理 1.1:   纹理可以控制渲染的每个像素的颜色. 1.2: 纹素:与像素一样,保存每 ...

  6. 19 (OC)* RunLoop

    面试题 1:讲讲RunLoop,项目中有用到吗? 2:RunLoop内部实现逻辑? 3:Runloop和线程的关系? 4:timer 与 Runloop 的关系? 5:程序中添加每3秒响应一次的NST ...

  7. 百度脑图-离线版（支持Linux、Mac、Win）

    免费好用的思维导图软件(在线版) 离线版:桌面版脑图是基于百度脑图的本地化版本,帮助你在没有互联网环境的情况下,依然可以使用脑图工具. 百度脑图帮助你进行思维导图,可以运用于学习.写作.沟通.演讲.管 ...

  8. pycharm最新版本激活码（永久有效） python安装教程

    Mac 系统自带python 1.打开终端, 输入 python 可以查看python当前版本. 2.输入“python”回车后即进入解释器,例如打印“hello world!”, 可输入 ‘ pri ...

  9. python的pywinrm模块远程连接windows执行dos命令

    ----A机器远程连接B---- 在A机器上安装模块: pip install pywinrm 在B机器上配置winrm服务的相关配置,使其支持远程控制: (winrm服务是windows 一种方便远 ...

  10. springboot全局异常拦截源码解读

    在springboot中我们可以通过注解@ControllerAdvice来声明一个异常拦截类,通过@ExceptionHandler获取拦截类抛出来的具体异常类,我们可以通过阅读源码并debug去解 ...