js 向页面添加元素后,怎么直接获取这个元素?

const html = '<li>111111</li>'
// 添加 li
const li = document.createElement('li')
document.body.appendChild(li)
// 改变它
li.outerHTML = html
// 输出的是空的 li 标签
console.log(li)

// ----

如上,我有一段字符串格式的 html 代码,想把它添加到页面上,并随后使用它。但这样执行最后输出的是空标签,并不是页面上添加到的这个元素。

如果不给这个元素添加 id、class 等选择器,想要在添加后获取这个元素,该怎么做呢?求教

阅读 3.2k
1 个回答

element DOM接口的outerHTML属性获取描述元素(包括其后代)的序列化HTML片段。它也可以设置为用从给定字符串解析的节点替换元素。MDN

li.outerHTML = html

执行这一步的时候你相当于把已经添加到页面的 li 标签换成了一个新的 li 标签(内容为111111),原始的变量 li 依旧是一个空的 li 标签

按你的逻辑这一步应该是

li.innerHTML = '111111'

当然,可以的话用 innerText 最好

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题