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 c语言怎么用printf（“\b \b”）与getch（）实现黑框里写入与删除？
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题，求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示？
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看
  • ¥15 关于#Java#的问题，如何解决？