2020-08-15

Dom操作：实现在div中添加span

DOM的全称是Document Object Model，即文档对象模型，它允许脚本控制Web页面、窗口和文档。

1.在div中添加span并可以删除

点击添加按钮，上边文本框会添加一个span。并且点击“x”的时候会删除这个span

    function add(a) {   /*添加函数*/
        let textArea=document.querySelector('#textArea');		/*#textArea 为div的id*/
        let span=document.createElement('span');			/*创造大span节点*/
        let span1=document.createElement('span');		/*大span里面装文字的容器*/
        let span2=document.createElement('span');		/*大span里面装'x'的容器*/
        let x=document.createTextNode('x');				/*创建文本‘x’*/

        let spanWord=[a];			/*定义一个数组*/

            spanWord[1] = document.createTextNode('John Doe');
            spanWord[2] = document.createTextNode('Jane Doe');
            spanWord[3] = document.createTextNode('Dan Doe');
            spanWord[4] = document.createTextNode('Danielle Doe');
            spanWord[5] = document.createTextNode('Mike Doe');
            spanWord[6] = document.createTextNode('Leah Doe');

                textArea.appendChild(span);   
                span.appendChild(span1);
                span1.appendChild(spanWord[a]);
                span.appendChild(span2);
                // textArea.child.appendChild(span);
                span2.appendChild(x);
                console.log(a);
                span2.onclick=function() {			/*'x'容器点击事件*/
                    span2.parentNode.parentNode.removeChild(span);		/*找到父亲节点的父亲节点的即刻删除父亲节点*/
        }

    }

全部清除

  function remove() {
        let textArea=document.querySelector('#textArea');/*静态获取id*/
        let aaa=document.querySelectorAll('#textArea>span');
        console.log(aaa);
        // console.log(spanLength.length);
        for (let i=0;i<aaa.length;i++){
            textArea.removeChild(aaa[i]);
            // i--;
        }
//         let textArea=document.getElementById('#textArea'); /*动态方法*/
//         let aaa=document.getElementsByTagNameNS('span');
//         for (let i=0;i<aaa.length;i++){
//             textArea.removeChild(aaa[0]);


}