1. 犀牛前端部落首页
  2. JavaScript百科

insertAdjacentHTML()使用详解

insertAdjacentHTML()使用详解

insertAdjacentHTML是一个非常酷的DOM方法,我们可以调用任何DOM元素来向页面添加新内容。

这是插入新内容的一种很方便且灵活的方法。

对元素调用该方法并接受两个参数:位置和包含HTML的字符串。

/**
* 犀牛前端部落
* https://www.pipipi.net
*/
const item = `<div>
    test
  </div>
`
document.querySelector('#container').insertAdjacentHTML('afterend', item)

注意afterend字符串。

这代表我们将HTML添加到容器中的位置。

我们有四种选项可以设置它的位置:

  • beforebegin 在元素之前
  • afterbegin 在元素的第一个子元素之后
  • beforeend 在元素的最后一个子元素之后
  • afterend 在元素之后

下面的示例代码展示了,向列表中添加了一项:

/**
* 犀牛前端部落
* https://www.pipipi.net
*/
document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>item</li>')

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3070.html

发表评论

登录后才能评论