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 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？