<!DOCTYPE html>
<html>
<head>
<title>动态获取li标签内容并调用函数</title>
</head>
<body>
<ul id="test">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<script>
window.onload = function() {
const listItems = document.getElementById("test").getElementsByTagName("li");
for (let i = 0; i < listItems.length; i++) {
listItems[i].addEventListener("click", function() {
const itemContent = this.textContent; // 获取li元素的文本内容
myFunction(itemContent);
});
}
};
function myFunction(value) {
// 在这里处理获取到的li元素内容
console.log("你点击了：", value);
// 例如，你可以用这个值更新其他页面元素：
// document.getElementById("result").textContent = "你点击了：" + value;
}
</script>
</body>
</html>
这段代码改进如下：
listItems 代替 obj_lis， itemContent 代替 val。textContent: textContent 比 innerHTML 更安全，因为它只获取文本内容，避免了潜在的脚本注入风险。addEventListener 方法添加事件监听器，这是更现代和推荐的方式。myFunction 函数中，用 console.log 显示点击内容，并添加了注释说明如何使用 value 更新页面其他元素。这段代码实现了动态获取点击 li 标签的内容，并将内容传递给 myFunction 函数进行处理。 myFunction 函数可以根据实际需求进行修改，以执行不同的操作。 图片位置保持不变。
以上就是JavaScript中如何动态获取点击li标签内容并调用函数？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
930
收藏
