如何使用javascript替换此html？

Question

I want to use javascript here, not jquery. How do I replace this html text?

How do I replace the 1 with a 5? I tried this but it didn't work.

 document.getElementsByClassName('hello').innerHtml=5 

  <li class='hello'> <a tabindex="0" aria-label="Page 1 is your current page" aria-current="page">1</a> </li> 

Answer 1

document.querySelector( '.hello a' ).innerHTML = 5;

document.getElementsByClassName() will give you a live HTMLCollection containing your <li> element. You need to use document.querySelector() to select the <a> .

The above solution will only work, if there is only one <a> matching that selector. Otherwise you would have to use document.querySelectorAll() and change for all elements or pick the right one.

Answer 2

Use,

document.querySelector(".hello a").innerHTML = 5;

The problem is that you are selecting the <li> element and not the <a> inside it.

Answer 3

Since you don't want to use jQuery, here is a JS function to consider:

function updateAnchorText(className, anchorText)
{
    // NOTE: you could make 'anchorText' an integer value that is incremented during each update and set using .ToString()
    var liElems = null;
    var aElems = null;
    var liElem = null;
    var aElem = null;
    var i,j;

    try
    {
        liElems=document.getElementsByClassName(className);

        if(liElems!=null)
        {
            for(i=0;i<liElems.length;i++)
            {
                liElem = liElems[i];
                aElems=liElem.getElementsByTagName("a");

                if(aElems!=null) 
                {
                    for(j=0;j<aElems.length;j++)
                    {
                        aElem = aElems[j];
                        aElem.innerHTML=anchorText;
                    }
                }
            }
        }
    }
    catch(e)
    {
        alert("Error:  " + e.Message);
    }
    finally
    {

    }

    return;
}

Call it using updateAnchorText("hello", "5");