javascript - 向页面添加动态元素-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 向页面添加动态元素

phpcn_u1582 2017-05-19 10:14:20

[JavaScript讨论组]

719

请教一个问题：为什么p元素只能插入一次，之后就无法再插入？

修改：
我把代码贴出来吧

这是html


    

        BOSS
        
        

            
        
    
    
        

        
            lily: 
            haha
        
        今天 04:32:56回复|赞
    
    
        

        
            lucy: 
            haha
        
        今天 04:32:57回复|赞

这是js

var oRemark=document.querySelector('.remark');
var oSubmit=document.querySelector('.remark .input-submit');
var oWrite=document.querySelector('.remark .input-write');
var arr=[];
            
oSubmit.onclick=function(){
    var value=oWrite.value;
    var time=new Date().toLocaleString();
    var ele=''+
        '
'+
        ''+
        'BOSS: '+
        ''+value+''+
        ''+
        ''+time+'回复|赞'+
        '';
    oRemark.innerHTML+=ele;
    console.log(1);
}

只能更新一次评论，然后就嗝屁了，不知道为啥？

感谢：不知道innerHTML这么神奇，何苦呢？
再次感谢！

phpcn_u1582

全部回复(3)

巴扎黑2017-05-19 10:16:20 3楼

box应该是个包含p的盒子吧，你的box是定值，要每次更新box的

赞 +0

添加回复

漂亮男人2017-05-19 10:16:20 2楼

因为你修改<p class="remark">里面的内容的时候新添加的按钮没有添加过点击事件的。就是这个时候添加点击事件的代码没有再次执行给你添加事件，你需要把添加事件的代码放到单独一个函数里，但页面加载的时候调用一遍。然后在替换<p class="remark">里面的内容之后再调用一遍，这样才能把点击事件给新添加的所有按钮生效。

话说回来还是浏览器里面js的运行原理和dom，你根据我说的重新写试试。

我觉得你的代码里面第一个按钮能正常添加，其他新添加的按钮无效。试试看。

赞 +0

添加回复

为情所困2017-05-19 10:16:20 1楼

你可以试下用jquery的方式试试看看。

//html
<p class="box"></p>
    <button class="btn">add</button>
//js
$(".btn").on("click", function() {
        var p = "<p>插入的文字</p>";
        $(".box").append(p);
    });

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>