obtener - innertext javascript
¿Es posible agregar innerHTML sin destruir los detectores de eventos de los descendientes? (9)
Ahora es 2012 y jQuery tiene funciones de agregar y anteponer que hacen exactamente esto, agregar contenido sin afectar el contenido actual. Muy útil.
En el siguiente código de ejemplo, adjunto un controlador de eventos onclick al tramo que contiene el texto "foo". El controlador es una función anónima que muestra una alerta ().
Sin embargo, si lo asigno al innerHTML del nodo padre, este controlador de evento onclick se destruye, haciendo clic en "foo" no aparece el cuadro de alerta.
¿Es esto solucionable?
<html>
<head>
<script type="text/javascript">
function start () {
myspan = document.getElementById("myspan");
myspan.onclick = function() { alert ("hi"); };
mydiv = document.getElementById("mydiv");
mydiv.innerHTML += "bar";
}
</script>
</head>
<body onload="start()">
<div id="mydiv" style="border: solid red 2px">
<span id="myspan">foo</span>
</div>
</body>
</html>
Como un leve (pero relacionado) asside, si utiliza una biblioteca de JavaScript como jquery (v1.3) para hacer su dom manipulación puede hacer uso de eventos en vivo mediante el cual configura un controlador como:
$("#myspan").live("click", function(){
alert(''hi'');
});
y se aplicará a ese selector en todo momento durante cualquier tipo de manipulación de jquery. Para ver eventos en vivo, consulte: docs.jquery.com/events/live para la manipulación de jquery, consulte: docs.jquery.com/manipulation
Creé mi marcado para insertarlo como una cadena ya que es menos código y más fácil de leer que trabajar con las cosas de fantasía.
Luego lo convertí en HTML interno de un elemento temporal solo para poder tomar al único hijo de ese elemento y conectarlo al cuerpo.
var html = ''<div>'';
html += ''Hello div!'';
html += ''</div>'';
var tempElement = document.createElement(''div'');
tempElement.innerHTML = html;
document.getElementsByTagName(''body'')[0].appendChild(tempElement.firstChild);
Desafortunadamente, la asignación a innerHTML causa la destrucción de todos los elementos secundarios, incluso si está intentando agregar. Si desea conservar los nodos secundarios (y sus controladores de eventos), necesitará usar las funciones DOM :
function start() {
var myspan = document.getElementById("myspan");
myspan.onclick = function() { alert ("hi"); };
var mydiv = document.getElementById("mydiv");
mydiv.appendChild(document.createTextNode("bar"));
}
Editar: la solución de Bob, a partir de los comentarios. Publica tu respuesta, Bob! Obtener crédito por eso. :-)
function start() {
var myspan = document.getElementById("myspan");
myspan.onclick = function() { alert ("hi"); };
var mydiv = document.getElementById("mydiv");
var newcontent = document.createElement(''div'');
newcontent.innerHTML = "bar";
while (newcontent.firstChild) {
mydiv.appendChild(newcontent.firstChild);
}
}
El uso de .insertAdjacentHTML() preserva los detectores de eventos y es compatible con todos los principales navegadores . Es un simple reemplazo de una línea para .innerHTML .
var html_to_insert = "<p>New paragraph</p>";
// with .innerHTML, destroys event listeners
document.getElementById(''mydiv'').innerHTML += html_to_insert;
// with .insertAdjacentHTML, preserves event listeners
document.getElementById(''mydiv'').insertAdjacentHTML(''beforeend'', html_to_insert);
El argumento ''beforeend'' especifica en qué parte del elemento insertar el contenido HTML. Las opciones son ''beforebegin'' , ''afterbegin'' , ''beforeend'' y ''afterend'' . Sus ubicaciones correspondientes son:
<!-- beforebegin -->
<div id="mydiv">
<!-- afterbegin -->
<p>Existing content in #mydiv</p>
<!-- beforeend -->
</div>
<!-- afterend -->
Existe otra alternativa: usar setAttribute lugar de agregar un detector de eventos. Me gusta esto:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo innerHTML and event listeners</title>
<style>
div {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div>
<span>Click here.</span>
</div>
<script>
document.querySelector(''span'').setAttribute("onclick","alert(''Hi.'')");
document.querySelector(''div'').innerHTML += '' Added text.'';
</script>
</body>
</html>
Perder controladores de eventos es, IMO, un error en la forma en que Javascript maneja el DOM. Para evitar este comportamiento, puede agregar lo siguiente:
function start () {
myspan = document.getElementById("myspan");
myspan.onclick = function() { alert ("hi"); };
mydiv = document.getElementById("mydiv");
clickHandler = mydiv.onclick; // add
mydiv.innerHTML += "bar";
mydiv.onclick = clickHandler; // add
}
Podrías hacerlo así:
var anchors = document.getElementsByTagName(''a'');
var index_a = 0;
var uls = document.getElementsByTagName(''UL'');
window.onload=function() {alert(anchors.length);};
for(var i=0 ; i<uls.length; i++)
{
lis = uls[i].getElementsByTagName(''LI'');
for(var j=0 ;j<lis.length;j++)
{
var first = lis[j].innerHTML;
string = "<img src=/"http://g.etfv.co/" + anchors[index_a++] +
"/" width=/"32/"
height=/"32/" /> " + first;
lis[j].innerHTML = string;
}
}
Soy un programador perezoso. No uso DOM porque parece una mecanografía extra. Para mí, cuanto menos código, mejor. Así es como agregaría "barra" sin reemplazar "foo":
function start(){
var innermyspan = document.getElementById("myspan").innerHTML;
document.getElementById("myspan").innerHTML=innermyspan+"bar";
}