使用 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.