如何使用jQuery和Javascript一次性更改HTML中所有按钮的InnerHTML？_Javascript_Jquery_Html_Dom

如何使用jQuery和Javascript一次性更改HTML中所有按钮的InnerHTML？

javascript jquery html dom

如何使用jQuery和Javascript一次性更改HTML中所有按钮的InnerHTML？,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,假设我的页面上有5个按钮。如何一次性更改按钮的innerHTML。单击Change InnerHTML按钮时，具有文本“单击”的I按钮应更改为“单击我” <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript"> function ChangeInnerHTML() { //Iterate all

假设我的页面上有5个按钮。如何一次性更改按钮的innerHTML。单击Change InnerHTML按钮时，具有文本“单击”的I按钮应更改为“单击我”

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript">
        function ChangeInnerHTML()
        {
            //Iterate all the buttons with innerHTML = "Clicked" in the DOM and set them to "Click me".
        }
    </script>
  </head>
  <body>
    <button type="button" id="myButton1">Click me</button>
    <button type="button" id="myButton2">Clicked</button>
    <button type="button" id="myButton3">Click me</button>
    <button type="button" id="myButton4">Clicked</button>
    <button type="button" id="myButton5">Click me</button>

    <button type="button" id="btnChangeInnerHTML" onclick="ChangeInnerHTML()">Change InnerHTML</button>

  </body>
 </html>


函数ChangeInnerHTML（）
{
//在DOM中使用innerHTML=“Clicked”迭代所有按钮，并将它们设置为“Click me”。
}
点击我
点击
点击我
点击
点击我
更改InnerHTML

在jquery中使用属性选择器

function ChangeInnerHTML() {
           $("[id^=myButton]:contains('Clicked')").click(function() {
                     $(this).text("Click Me");

        });
       }

在jquery中使用属性选择器

function ChangeInnerHTML() {
           $("[id^=myButton]:contains('Clicked')").click(function() {
                     $(this).text("Click Me");

        });
       }

不带jQuery

function ChangeInnerHTML() {
    var btns = document.querySelectorAll('button[id^=myButton]');
    for (var i = 0; i < btns.length; i++) {
        if (btns[i].innerHTML.trim() == 'Clicked') {
            btns[i].innerHTML = 'Click Me'
        }
    }
}

函数ChangeInnerHTML（）{
var btns=document.querySelectorAll（'button[id^=myButton]）；
对于（变量i=0；i


演示：
不带jQuery
function ChangeInnerHTML() {
    var btns = document.querySelectorAll('button[id^=myButton]');
    for (var i = 0; i < btns.length; i++) {
        if (btns[i].innerHTML.trim() == 'Clicked') {
            btns[i].innerHTML = 'Click Me'
        }
    }
}

函数ChangeInnerHTML（）{
var btns=document.querySelectorAll（'button[id^=myButton]）；
对于（变量i=0；i

演示：
您可以执行以下操作：
function ChangeInnerHTML() {
    $('button').each(function() {
        if ($.trim($(this).html()) == "Clicked") 
            $(this).html('Click me');
    });
}

您可以执行以下操作：
function ChangeInnerHTML() {
    $('button').each(function() {
        if ($.trim($(this).html()) == "Clicked") 
            $(this).html('Click me');
    });
}

其他答案看起来工作量太大了
<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript">
        function ChangeInnerHTML(){
            document.body.innerHTML=
            document.body.innerHTML.replace(/Clicked/g,'Click me');
        }
    </script>
  </head>
  <body>
    <button type="button" id="myButton1">Click me</button>
    <button type="button" id="myButton2">Clicked</button>
    <button type="button" id="myButton3">Click me</button>
    <button type="button" id="myButton4">Clicked</button>
    <button type="button" id="myButton5">Click me</button>
    <button type="button" id="btnChangeInnerHTML" onclick="ChangeInnerHTML()">Change InnerHTML</button>

  </body>
 </html>


函数ChangeInnerHTML（）{
document.body.innerHTML=
replace（/Clicked/g，'clickme'）；
}
点击我
点击
点击我
点击
点击我
更改InnerHTML
其他答案看起来工作量太大了
<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript">
        function ChangeInnerHTML(){
            document.body.innerHTML=
            document.body.innerHTML.replace(/Clicked/g,'Click me');
        }
    </script>
  </head>
  <body>
    <button type="button" id="myButton1">Click me</button>
    <button type="button" id="myButton2">Clicked</button>
    <button type="button" id="myButton3">Click me</button>
    <button type="button" id="myButton4">Clicked</button>
    <button type="button" id="myButton5">Click me</button>
    <button type="button" id="btnChangeInnerHTML" onclick="ChangeInnerHTML()">Change InnerHTML</button>

  </body>
 </html>


函数ChangeInnerHTML（）{
document.body.innerHTML=
replace（/Clicked/g，'clickme'）；
}
点击我
点击
点击我
点击
点击我
更改InnerHTML
您已经使用jQuery标记了问题，但它没有被使用吗？@ArunPJohny-我认为可以使用jQuery完成。早些时候，我使用jquery清空了所有的文本框，比如$（'input[type=text]'）.val（“”；）；。但是这次我必须更改一些按钮的innerHTML。您已经使用jQuery标记了问题，但它没有被使用吗？@ArunPJohny-我认为可以使用jQuery完成。早些时候，我使用jquery清空了所有的文本框，比如$（'input[type=text]'）.val（“”；）；。但这次我必须更改一些按钮的innerHTML。我不想更改所有按钮的html。这只会更改id属性中包含“myButton”的按钮。有关更多信息，请在单击html的按钮处查看jquery选择器页面，只有那些应该更改为单击我的按钮。您的代码将更改包含myButton id的所有按钮的html。您确实意识到将“Click me”更改为“Click me”没有效果，但为什么将“Click me”更改为“Click me”，因为这没有任何意义。此外，我的页面中还有一些其他按钮，用于其他用途，其id以“myButton”开头。这些也会受到上述方法的影响。我不想更改所有按钮的html。这只会更改id属性中包含“myButton”的按钮。有关更多信息，请在单击html的按钮处查看jquery选择器页面，只有那些应该更改为单击我的按钮。您的代码将更改包含myButton id的所有按钮的html。您确实意识到将“Click me”更改为“Click me”没有效果，但为什么将“Click me”更改为“Click me”，因为这没有任何意义。此外，我的页面中还有一些其他按钮，用于其他用途，其id以“myButton”开头。这些也会受到上述方法的影响。