如何使用简单的javascript在单击li时从嵌套的span中获取文本

我还没有得到jQuery，所以请使用javascript。我需要帮助调整我的JS，使其在单击时从li中的嵌套跨距中获取文本。如果您单击文本，我现在可以使用它，但是如果您单击整个li而不获取其他嵌套元素（图像），我希望它可以使用

现在我正在使用以下html和js：

HTML:

---

我希望在单击li时将SPAN中的文本写入输入，而不仅仅是SPAN。我知道应该将onClick调用从span移到li，但是如何调整JS，使其只获取span内的文本，而不获取IMG？

您可以使用

.getElementsByTagName（）方法获取内部
元素：

HTML:

给你

html

或

无论如何，我会在ul或li中添加一个eventlistener。。如果您想稍后更新代码，那么内联js会变得一团糟。而且，如果您在每个li上添加
onclick=“myfunction（this）”
，会生成更多的代码。
为什么要使用
innerHTML
？@PeeHaa，因为OP使用的是
innerHTML
。问题不是关于
innerHTML
，而是关于
元素选择。不是问题是关于获取span@PeeHaa更好？事实上，如果你使用
innerHTML
作为获取工具，速度方面的问题其实并不重要。@Jonast92请你解释一下OP为什么我们都应该避免
innerHTML
获取标签内容。这不是OP在我读问题时要求的。也不需要在回答中要求解释。这会让你的答案a）更糟，b）对否决票的评论不正确mandatory@Jonast92为什么要避免使用innerHTML？请添加一些信息，不要只是吐出命令。@geenhank，因为您需要的是文本而不是html。
<ul><li><img><span onclick="myfunction(this)">TEXT</span></li></ul> 

<input id="iSupervisorUserName" name="OBKey_WF_Manger_Supervisor_1" type="text" />

function myfunction(span) {
    var textInsideLi = span.innerHTML;
    var field = document.getElementById("iSupervisorUserName");
    field.value = textInsideLi;

<ul><li onclick="myfunction(this);"><img><span>TEXT</span></li></ul>

function myfunction(li) {
    var span = li.getElementsByTagName('span')[0],
        textInsideLi = span.textContent || span.innerText,
        field = document.getElementById('iSupervisorUserName');

    field.value = textInsideLi;
    // ...
}

<ul><li onclick="myfunction(this)"><img><span>TEXT</span></li></ul>

function myfunction(li){
 document.getElementById("iSupervisorUserName").value=
 li.getElementsByTagName('span')[0].textContent;
}

function myfunction(li){
 document.getElementById("iSupervisorUserName").value=
 li.childNodes[1].textContent;
}