ts dom 事件的处理，添加内容

最新推荐文章于 2025-08-20 14:20:40 发布

原创最新推荐文章于 2025-08-20 14:20:40 发布 · 648 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#typescript

这段代码展示了如何使用JavaScript监听元素点击事件并动态插入内容到页面中。它创建了一个名为hd的类，用于获取和返回元素的innerHTML。通过事件监听器阻止了默认行为，并在body元素后面插入了测试内容。


const bt = document.querySelector('#ds') as HTMLDivElement

bt.addEventListener('click',(e:Event)=>{
    e.preventDefault();
    const body = document.querySelector('body')!
    body.insertAdjacentHTML('beforeend','this is test content!')
})


class hd{
    el:HTMLDivElement
    constructor(el:HTMLDivElement){
        this.el = el
    }
    html() {
        return this.el.innerHTML
    }
}
const el = document.querySelector('.ds') as HTMLDivElement
const hd1 = new hd(el);
hd1.html()