zoukankan      html  css  js  c++  java
  • 原生js动态创建文本内容的几种方式

    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结合实现追加文本内容

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <div id="div1">
     6     <p id="p1">这是一个段落。</p>
     7     <p id="p2">这是另一个段落。</p>
     8 </div>
     9 
    10 <script>
    11 //添加的第一个文本(多次覆盖内容)
    12 var newEle=document.getElementsByTagName("p");
    13 newEle[0].innerHTML="new paragraph";  //输出结果:new paragraph
    14 
    15 //添加的第二个文本(可追加内容多次)
    16 var newText2 = document.createTextNode(" hello world");
    17 newEle[0].appendChild(newText2);
    18 
    19 //输出结果:new paragraph hello world
    20 
    21 </script>
    22 
    23 </body>
    24 </html>
  • 相关阅读:
    Building a ListBox with custom content in Silverlight 4.0
    asp.net通讯问题
    Using the NavigationService Object in SL4.0
    Creating a File Explorer for Isolated Storage
    图表ASP:Chart
    什么是继承?
    Java基础一笔带过
    Java多态
    自己动手写个小框架之七
    linux crontab 定时计划
  • 原文地址:https://www.cnblogs.com/jing-tian/p/10810723.html
Copyright © 2011-2022 走看看