javascript - 使用没有 Id 和标记名的 javascript 更改 DIV 文本

Question

我有这个代码

<div class="points">
   <span>your points:</span>
   <div>29 P</div>
   <div>0 EXP</div>
</div>

我的代码中有多个 DIV 标签，我想更改第二个 div 的文本名称标签或 ID 代码。实际上我想用我的代码替换这段文本我已经尝试过使用 js 一个简单的 CSS 注入(inject)器

function injectCSS(str) {
    var node = document.createElement('style');
    node.innerHTML = str;
    document.body.appendChild(node);
}

injectCSS('div.points div:nth-child(2) { color: red } ');
injectCSS('div.points div:nth-child(2) { background: silver } ');

但这不会删除文本并让我添加新文本

Answer 1

我想你已经接近使用你的函数了，但这可以通过简单地使用 JS querySelector 来完成:

<div class="points">
   <span>your points:</span>
   <div>29 P</div>
   <div>0 EXP</div>
</div>   

和:

var str = "My String",
    el = document.querySelector('div.points div:nth-child(2)');

    el.innerHTML = str;   

一旦您将“HTML 元素”缓存在变量中，您就可以轻松地操作它的其他属性，如下所示:

el.style.color = "red";

附言。没有必要为此使用 jQuery。

var str = "My String",
	el = document.querySelector('div.points div:nth-child(2)');
    
    el.innerHTML = str;
    el.style.color = "red";

<div class="points">
   <span>your points:</span>
   <div>29 P</div>
   <div>0 EXP</div>
</div>