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 面试题 1-10

    1. Java 基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法, 线程的语法,集合的语法,io 的语法,虚拟机方面的语法 1.一个".java&q ...

  2. CenTOS7使用ACL控制目录权限，只给某个用户访问特定目录

    前言 Linux 基本的权限控制仅可以对所属用户.所属组.其他用户进行的权限控制,而不能精确地控制每个用户的权限.ACL 规则就是用来解决这个问题的. 使用 ACL 规则,我们可以针对单一账户设置文件 ...

  3. 【LeetCode】34-在排序数组中查找元素的第一个和最后一个位置

    题目描述 给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 你的算法时间复杂度必须是 O(log n) 级别. 如果数组中不存在目标值 ...

  4. SSM框架学习笔记（一）

    Spring框架 Spring :是一个开源框架,起初是为解决企业应用开发的复杂性而创建的,但是现在已经不止 企业级应用开发,Spring的核心就是提供了一个轻量级的控制反转和面向切面编程. SPri ...

  5. apache ignite系列（九）：使用ddl和dml脚本初始化ignite并使用mybatis查询缓存

    博客又断了一段时间,本篇将记录一下基于ignite对jdbc支持的特性在实际使用过程中的使用. 使用ddl和dml脚本初始化ignite 由于spring-boot中支持通过spring.dataso ...

  6. 去掉网页中alert和confirm弹出框自带的网址

    去掉网页中alert和confirm弹出框自带的网址 Alert: <script> window.alert = function(name){ var iframe = documen ...

  7. centos7上部署dubbo管理控制台dubbo-admin

    centos7上部署dubbo管理控制台dubbo-admin 1 准备工作 服务器:系统centos7, 内存4G, 存储60G, ip 192.168.159.128 软件环境: 安装有jdk1. ...

  8. LOVE POWER html与javaScript

    1.纯HTML与javaScript编写的表白动态图 1.对于世界而言,你是一个人:但是对于某个人,你是他的整个世界. 2.不要为那些不愿在你身上花费时间的人而浪费你的时间. 3.我爱你,不是因为你是 ...

  9. 微信支付中分账功能 填坑指南V1

    公司是做电商的,近期开发了一款小程序,准备线上线下同步销售玩具.这里就涉及到微信支付的功能,网上有很多教程,官方也有文档和Demo,因此微信支付还是比较容易实现的. 由于我们公司是和其他公司合作运营的 ...

  10. charles SSL代理设置

    本文参考:charles SSL代理设置 charles SSL代理设置 SSL Proxying Srtting 这里最常用的设置就是第一个ssl proxying,这里记录了需要捕获哪些ssl的信 ...