[英]Replace HTML content using javaScript function onclick div?
I have the below snippet, which will output HTML , but I want texts A0100 and A0102 as combined string 我有下面的代码片段,它将输出HTML ,但我想将文本A0100和A0102作为组合字符串
function closespan(val) { var parent = val.parentElement; parent.parentElement.removeChild(parent); var valHTML = document.getElementById("lblshowselected").innerHTML; var valSPLIT = valHTML.replace(/<img src="images\\/delete.png" height="10">/, ","); var valTEXT = valSPLIT.innerText; }
<div runat="server" id="lblshowselected"> <div class="tknz-token">A0100<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div> <div class="tknz-token">A0102<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div> </div>
Output 产量
valHTML : "<div class="tknz-token">A0100<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div><div class="tknz-token">A0102<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div>"
valHTML: "<div class="tknz-token">A0100<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div><div class="tknz-token">A0102<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div>"
Expected Output 预期产出
A0100,A0102 A0100,A0102
You need to get the tknz-token
elements using getElementsByClassName()
and iterate to get push textContent
in an array. 您需要使用getElementsByClassName()
获取tknz-token
元素并迭代以在数组中获取push textContent
。
Here is an example, I have only added code to get the textContent
. 这是一个例子,我只添加了代码来获取textContent
。
function closespan(val) { //Modified code var lbl = document.getElementById("lblshowselected"); var arr = []; var tokens = lbl.getElementsByClassName('tknz-token'); for (var i = 0; i < tokens.length; i++) { arr.push(tokens[i].textContent); } console.log(arr.join(',')); }
<div runat="server" id="lblshowselected"> <div class="tknz-token">A0100<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div> <div class="tknz-token">A0102<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div> </div>
Add your text as HTML instead of normal Text 将文本添加为HTML而不是普通文本
function closespan(val) { debugger; var parent = val.parentElement; parent.parentElement.removeChild(parent); var valHTML = document.getElementById("lblshowselected"); var valSPLIT = valHTML.replace(/<img src="images\\/delete.png" height="10">/, ","); valHTML.innerHTML(valSPLIT); }
<div runat="server" id="lblshowselected"> <div class="tknz-token">A0100<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div> <div class="tknz-token">A0102<span class="tknz-token-x" onclick="closespan(this);"><img src="images/delete.png" height="10"></span></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.