问答详情
源自:9-13 插入节点insertBefore()

实现创建一个新li标签,内容为"php",并将新创建的li插入到内容为HTML的标签前。

http://www.imooc.com/code/1699

若看不到html框架代码,想写个找到内容为HTML的元素节点,并找到他的父节点,再创建标签插入,这个应该怎样写? 我这里的a代表父节点,y代表新创建的节点,把n当成内容是HTML的节点 我这段代码应该怎样改?请高手指点~这里应该不用判断父节点是否是元素节点了吧?

  function insetb(n){

      if(n.innerHTML=="HTML"){

          var a=n.parentNode;

          var y=document.createElement("li");

          y.innerHTML='PHP';

          a.insertBefore(y,n)

          }  

      }

提问者:仢约 2016-11-16 18:50

个回答

  • 老友丶
    2016-11-25 12:50:22

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>无标题文档</title>

    </head>

    <body>


    <ul id="test">

        <li>JavaScript</li>

        <li>HTML</li>

    </ul> 

    <p>段落</p>

    <h1>标题</h1>

    <ul id="test">

        <li>JavaScript</li>

        <li>HTML</li>

        <li>CSS</li>

    </ul> 

    <script>

        window.onload=function(){

            var body=document.body;

            var Obj=body.getElementsByTagName("*");

            for(var i=0,leng=Obj.length;i<leng;i++){

                if(Obj[i].innerHTML == "HTML"){

                    var newNode=document.createTextNode("PHP");   //添加的文本节点,所以前面没有列表的符号

                    Obj[i].parentNode.appendChild(newNode);

                    break;  //如果只找第一个HTML,则break;不要这句就是找所有HTML后面添加PHP

                }

            }

        }

    </script>

    </body>

    </html>


  • 仢约
    2016-11-16 23:36:12

    <script type="text/javascript">

       function find(node){

          if(node.children.length!=0){

            var a=node.children;

            for(var i=0;i<a.length;i++){

              if(a[i].innerHTML == "HTML"){

                  var n=a[i].parentNode;

                  var y=document.createElement("li");

              y.innerHTML='PHP';

              n.insertBefore(y,a[i])

              break;

              }

              find(a[i]);

            }

          }

        }

        var body=document.body;

        find(body);

    </script> 

    老友给写的代码,保存到这里吧~

  • 老友丶
    2016-11-16 20:17:14

    不是很明白你的意思,大概猜的。

    如果不知道HTML代码要找特定的一个元素节点,还不知道id和class。只能从body开始的子节点一个节点一个节点不断往下找。这样就需要递归。jQuery好像有个简单的办法,原生JS只能一层一层往下找,没找到一个节点,然后判断,这样就可以找到了。

    不过话说回来,HTML和JavaScript都是前端的,这种情况一般很少出现。

  • CrystalChan4337840
    2016-11-16 20:15:30

    你没有声明n是哪个标签吧

    试下var n = document.getElementByTagName('li');