如何在JavaScript函数中访问某些嵌套div的外部innerHTML

Question

To keep it simple, I have below html code:

<div class = "customers" data-popover="true" data-html=true
 data-content="
  <table>
      <c:forEach items="${element.first}" var="btnVal" varStatus="loop"> 
        <c:if test="${not loop.first}">
        <tr> <button onclick='setTestname(innerHTML)' class='btn btn-primary'> ${btnVal}</button> </tr>
        <tr>&nbsp</tr>
        </c:if>
      </c:forEach>  
   </table>
  ">
 <br>${element.first.get(0)}
</div>

Here I am trying to use the value of the clicked button using below javascript function:

function setTestname(test){
  test = test.toString().trim();

  document.getElementById('hiddenCostomer').value=test;                     
  setLogfilename(test);
  document.getElementById('form1').submit();
}

Above code works fine, but I am not sure abt how to access value of div as well. I want to pass two values to setTestname

1. ${btnVal}
2. ${element.first.get(0)}

How to get value of ${element.first.get(0)}

EDIT : I want the exact value of div on which the button is clicked , not the entire DOM.

Answer 1

You should add the value to a data attribute and then get it, something like this:

HTML:

<div id="myid" data-mydata="${element.first.get(0)}"></div>

JS:

document.getElementById("myid").getAttribute("data-mydata");

Answer 2

You can pass the class name of the div you want to fetch contents of.

setTestName(innerHTML, 'customers')

Then use customers as:

document.getElementsByClassName('customers')

which will return the DOM.

Answer 3

<c:set var="BtnIndex" value="${0}"/>

then I set

<tr> <button onclick='setTestname(innerHTML,${BtnIndex + 0})' class='btn btn-primary' > ${btnVal} ${BtnIndex + 0}</button> </tr>

I set one counter and assigned each div a unique number. Later , i fetched the value from array of class customers from that unique counter as index

function setTestname(test,btnIndex){
    test = test.toString().trim();
    btnIndex = btnIndex.toString();

    var elemArray = document.getElementsByClassName('customers');
    for(var i = 0; i < elemArray.length; i++){
        elemArray[i].id = i;
    }

    var elem = document.getElementById(elemArray[btnIndex].id);
    var mainDir = elem.innerHTML;
}

It worked !!! Bingo