如何操作 DOM 元素，并在 chrome 扩展脚本中替换它？

Question

在 chrome 扩展中，如何操作原始 html 内容

index.html

  <div class='demo'>
    <SPAN class ="number">1</SPAN>
<SPAN class ="number">2</SPAN>
<SPAN class ="number">3</SPAN>
<SPAN class ="number">4</SPAN>
    </div>

content.js

//some logic to get arrays of text in "number" class from html,then multiply with 2 , then update the index.html

required output (index.html)

  <div class='demo'>
    <SPAN class ="number">2</SPAN>
<SPAN class ="number">4</SPAN>
<SPAN class ="number">6</SPAN>
<SPAN class ="number">8</SPAN>
    </div>

Answer 1

试试这个简单的 jquery 代码。

var c = 2;
$(".demo .number").each(function(){
    $(this).html(c);
    c += 2;
});

Answer 2

希望对您有所帮助

index.html

 <div class='demo'>
<span  class ="number">1</span>
<span  class ="number">2</span>
<span  class ="number">3</span>
<span  class ="number">4</span>
    </div>
    <button>d</button>

content.js

$("button").click(function(){

    x=document.getElementsByClassName("number");  // Find the elements
for(var i = 0; i < x.length; i++){
var y = parseInt(x[i].innerText) * 2;
x[i].innerText= y;    // Change the content

} 
});

这会给你想要的输出，

如何操作 DOM 元素，并在 chrome 扩展脚本中替换它？

How to manipulate DOM elements,and replace it in chrome extension script?

javascript

google-chrome-extension

content-script