使用 javascript 按类名更改 html 元素的值
[英]Change value of html element by classname using javascript
问题描述
这是我的 HTML 代码：
<li class="list-promotions">
<ul class="list-promotions-item">
<li>
<a href="http://example.com/link">offers</a>
</li>
</ul>
</li>
我尝试使用这个 javascript 代码：（这个线程）
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementsByClassName("classname")[0].innerHTML = "qwerty";
});
它有效，但它将我的 HTML 更改为：
<li class="list-promotions">
<ul class="list-promotions-item">qwerty</ul>
</li>
所以我丢失了<a>标签和href 。
我该如何解决这个问题？ 我只想将offers更改为另一个文本并保留<a>标记
注意：我无权访问 HTML 代码来为<a>标签设置 class 名称并使用上述 javascript 代码。
2 个解决方案
解决方案1
1 2019-11-12 11:20:28
document.querySelector(".list-promotions-item > li > a").textContent = "qwerty";
解决方案2
0 2019-11-12 10:54:52
innerHTML 属性设置或返回元素的 HTML 内容（内部 HTML）。
您尚未将 HTML 中的类名 class 添加到锚标记。
<li class="list-promotions">
<ul class="list-promotions-item">
<li>
<a href="http://example.com/link" class="classname">offers</a>
</li>
</ul>
</li>
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementsByClassName("classname")[0].innerHTML = "qwerty";
});
您可以在以下网址了解更多信息： https://www.w3schools.com/jsref/prop_html_innerhtml.asp
使用 Jquery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.list-promotions-item li a').html('qwerty');
});
</script>
</head>
<body>
<li class="list-promotions">
<ul class="list-promotions-item">
<li>
<a href="http://example.com/link">offers</a>
</li>
</ul>
</li>
</body>
</html>
如何使用javascript按类名更改html元素的值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.