javascript高级程序设计之文本节点

标签：des   style   color   io   java   ar   数据   div   cti   

1、创建文本节点：

 <script type="text/javascript">
        function addNode(){
        
            var element = document.createElement("div");
            element.className = "message";
            
            var textNode = document.createTextNode("Hello world!");
            element.appendChild(textNode);
            
            document.body.appendChild(element);
        }

    </script>

    <script type="text/javascript">
        function addNode(){
        
            var element = document.createElement("div");
            element.className = "message";
            
            var textNode = document.createTextNode("Hello world!");
            element.appendChild(textNode);
            //另外一个节点
            var anotherTextNode = document.createTextNode("Yippee!");
            element.appendChild(anotherTextNode);
            //插入到文档body中
            document.body.appendChild(element);
        }

    </script>

2、规范化文本节点:normalize()

    <script type="text/javascript">
        function addNode(){
        
            var element = document.createElement("div");
            element.className = "message";
            
            var textNode = document.createTextNode("Hello world!");
            element.appendChild(textNode);
            //新增的另外一个文本节点
            var anotherTextNode = document.createTextNode("Yippee!");
            element.appendChild(anotherTextNode);
            //添加到文档的body元素中
            document.body.appendChild(element);
            
            alert(element.childNodes.length);  //2
            
            <span style="color:#ff0000;">element.normalize();//规范化过程</span>
            alert(element.childNodes.length);  //1
            alert(element.firstChild.nodeValue);  //"Hello World!Yippee!"
            
        }

    </script>

其效果跟normalize()方法相反：splitText().将一个节点分为两个，即按照指定的位置分割nodeValue值。

    <script type="text/javascript">
        function addNode(){
        
            var element = document.createElement("div");
            element.className = "message";
            
            var textNode = document.createTextNode("Hello world!");
            element.appendChild(textNode);
            
            document.body.appendChild(element);
            
           <span style="color:#ff0000;"> var newNode = element.firstChild.splitText(5);</span>
            alert(element.firstChild.nodeValue);  //"Hello"
            alert(newNode.nodeValue);             //" world!"
            alert(element.childNodes.length);     //2

            
        }

    </script>

javascript高级程序设计之文本节点

标签：des   style   color   io   java   ar   数据   div   cti   

原文地址：http://blog.csdn.net/zz410675629/article/details/39119737