qq_47583437 2020-05-06 01:39 采纳率: 100%
浏览 76
已采纳

JavaScript#dom节点相关问题

图片是题目，下面是我写的代码，我是小白，请问一下各位大佬这段代码错了哪里

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
            <DIV style="BORDER-TOP: #00686b 1px dashed; OVERFLOW: hidden; HEIGHT: 1px"></DIV><!-- 虚线 -->
        <p id="p1">绿叶学习网</p>
            <HR><!-- 分割线 -->
        <form>
            输入标签：<input type="text" id="node" onclick="add4()"/><br>
            输入内容：<input type="text" id="content" onclick="add5()">
        </form>
        <input type="button" value="替换" onclick="add6()"/>
        <script>
            function add4(){
                var te1 = document.getElementById("node").value;
                var para = document.createElement(te1);//创建一个新元素节点
                return para;
            }
            function add5(){
                var te2 = document.getElementById("content").value;
                var node = document.createTextNode(te2);//创建一个文本节点
                return node,para;   
            }
            function add6(){
                para.appendChild(node);//将文本节点插入到元素节点
                var parent = document.getElementById("p1");//查找一个已有的元素p1
                parent.replaceChild(para);
            }
        </script>

    </body>
</html>
  • 写回答

1条回答 默认 最新

  • patrickrun 2020-05-06 09:35
    关注

    试试这个

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
            <DIV style="BORDER-TOP: #00686b 1px dashed; OVERFLOW: hidden; HEIGHT: 1px"></DIV><!-- 虚线 -->
        <p id="p1">绿叶学习网</p>
        <HR><!-- 分割线 -->
        <form>
            <!-- 输入标签：<input type="text" id="node" onclick="add4()"/><br>
            输入内容：<input type="text" id="content" onclick="add5()"> -->
            输入标签：<input type="text" id="node"/><br>
            输入内容：<input type="text" id="content">
        </form>
        <input type="button" value="替换" onclick="add6()"/>
        <script>
            function add4(){
                var te1 = document.getElementById("node").value;
                var para = document.createElement(te1);//创建一个新元素节点
                return para;
            }
            function add5(){
                var te2 = document.getElementById("content").value;
                var node = document.createTextNode(te2);//创建一个文本节点
                return node,para;   
            }
            function add6(){
                var te1 = document.getElementById("node").value;
                var newNode = document.createElement(te1);//创建一个新元素节点

                var te2 = document.getElementById("content").value;
                var textNode = document.createTextNode(te2);//创建一个文本节点

                newNode.appendChild(textNode);//将文本节点插入到元素节点

                var parent = document.getElementsByTagName("body")[0];//查找一个已有的元素p1
                parent.appendChild(newNode);//将元素节点插入父节点

                var oldNode = document.getElementById("p1");//查找一个已有的元素p1
                parent.replaceChild(newNode, oldNode);
            }
        </script>

    </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 宇视监控服务器无法登录
  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥15 DruidDataSource一直closing
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
  • ¥50 STM32单片机传感器读取错误
  • ¥50 power BI 从Mysql服务器导入数据，但连接进去后显示表无数据