原生js动态创建文本内容的几种方式
2024-08-30 02:17:46
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>
最新文章
- C# 异步
- PHP 汉字转拼音类
- myeclipse 在mac中字体模糊问题解决方案
- 连通性2 无向图的割边 (cut edge)
- ADO.NET笔记——存储二进制大对象(BLOB)
- [译]GotW #6b Const-Correctness, Part 2
- 九度OJ 1118 数制转换
- 码表 ASCII Unicode GBK UTF-8
- elk 发送zabbix告警
- jquery 根据网站url给导航nav添加active效果
- Java和PHP在Web开发方面的比较
- error C2471: 无法更新程序数据库
- bash组织成树数据结构
- 【JAVA】【NIO】5、Java NIO Scatter / Gather
- 【NOIP模拟】matrix(简化矩阵)
- spark头脑镜像
- makefile的命令包定义及使用
- 2019年3月10日 装饰器进阶-模拟session
- throw与throws
- hdu 2516(Fibonacci博弈博弈)