Im folgenden Beispielcode füge ich einen onclick
-Ereignishandler an den Bereich an, der den Text "foo" enthält. Der Handler ist eine anonyme Funktion, die eine Warnung () anzeigt.
Wenn ich jedoch der innerHTML
des übergeordneten Knotens zuweise, wird diese onclick
-Ereignisprozedur zerstört. Wenn Sie auf "foo" klicken, wird das Benachrichtigungsfeld nicht angezeigt.
Ist das fixierbar?
<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>
Leider führt die Zuweisung zu innerHTML
zur Zerstörung aller untergeordneten Elemente, selbst wenn Sie versuchen, anzufügen. Wenn Sie untergeordnete Knoten (und ihre Ereignishandler) beibehalten möchten, müssen Sie die DOM-Funktionen verwenden:
function start() {
var myspan = document.getElementById("myspan");
myspan.onclick = function() { alert ("hi"); };
var mydiv = document.getElementById("mydiv");
mydiv.appendChild(document.createTextNode("bar"));
}
Edit: Bobs Lösung aus den Kommentaren. Poste deine Antwort, Bob! Holen Sie sich Kredit dafür. :-)
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);
}
}
Durch die Verwendung von .insertAdjacentHTML()
bleiben Ereignis-Listener erhalten und wird von allen gängigen Browsern unterstützt . Es ist ein einfacher einzeiliger Ersatz für .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);
Das Argument 'beforeend'
gibt an, wo im Element der HTML-Inhalt eingefügt werden soll. Optionen sind 'beforebegin'
, 'afterbegin'
, 'beforeend'
und 'afterend'
. Ihre entsprechenden Standorte sind:
<!-- beforebegin -->
<div id="mydiv">
<!-- afterbegin -->
<p>Existing content in #mydiv</p>
<!-- beforeend -->
</div>
<!-- afterend -->
Nun ist es 2012, und jQuery verfügt über Funktionen zum Anhängen und Voranstellen, die genau dies tun und Inhalte hinzufügen, ohne den aktuellen Inhalt zu beeinträchtigen. Sehr hilfreich.
Als leichte (aber verwandte) Angelegenheit: Wenn Sie eine Javascript-Bibliothek wie jquery (v1.3) verwenden, um Ihre Dom-Manipulation durchzuführen, können Sie Live-Events verwenden, wobei Sie einen Handler wie folgt einrichten:
$("#myspan").live("click", function(){
alert('hi');
});
und es wird zu jeder Zeit während dieser Art von Jquery-Manipulation auf diesen Selektor angewendet. Für Live-Events siehe: docs.jquery.com/events/live für die Bearbeitung von Jquery siehe: docs.jquery.com/manipulation
something.innerHTML + = 'alles hinzufügen, was Sie möchten';
es hat für mich funktioniert. Ich habe mit dieser Lösung eine Schaltfläche zu einem Eingabetext hinzugefügt
Ich habe mein Markup erstellt, um es als Zeichenfolge einzufügen, da es weniger Code enthält und einfacher zu lesen ist, als mit dem ausgefallenen Dom-Material zu arbeiten.
Dann machte ich es innerHTML aus einem temporären Element, nur damit ich das einzige Kind dieses Elements nehmen und am Körper befestigen konnte.
var html = '<div>';
html += 'Hello div!';
html += '</div>';
var tempElement = document.createElement('div');
tempElement.innerHTML = html;
document.getElementsByTagName('body')[0].appendChild(tempElement.firstChild);
Eventhandler zu verlieren ist, IMO, ein Fehler in der Art und Weise, wie Javascript das DOM behandelt. Um dieses Verhalten zu vermeiden, können Sie Folgendes hinzufügen:
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
}
Es gibt eine andere Alternative: Verwenden Sie setAttribute
, anstatt einen Ereignis-Listener hinzuzufügen. So was:
<!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>
Für jedes Objektarray mit Header und Daten .jsfiddle
https://jsfiddle.net/AmrendraKumar/9ac75Lg0/2/
<table id="myTable" border='1|1'></table>
<script>
const userObjectArray = [{
name: "Ajay",
age: 27,
height: 5.10,
address: "Bangalore"
}, {
name: "Vijay",
age: 24,
height: 5.10,
address: "Bangalore"
}, {
name: "Dinesh",
age: 27,
height: 5.10,
address: "Bangalore"
}];
const headers = Object.keys(userObjectArray[0]);
var tr1 = document.createElement('tr');
var htmlHeaderStr = '';
for (let i = 0; i < headers.length; i++) {
htmlHeaderStr += "<th>" + headers[i] + "</th>"
}
tr1.innerHTML = htmlHeaderStr;
document.getElementById('myTable').appendChild(tr1);
for (var j = 0; j < userObjectArray.length; j++) {
var tr = document.createElement('tr');
var htmlDataString = '';
for (var k = 0; k < headers.length; k++) {
htmlDataString += "<td>" + userObjectArray[j][headers[k]] + "</td>"
}
tr.innerHTML = htmlDataString;
document.getElementById('myTable').appendChild(tr);
}
</script>
Am einfachsten ist es, ein Array und Push-Elemente darin zu verwenden und die nachfolgenden Werte des Arrays dynamisch in das Array einzufügen ..__ Hier ist mein Code:
var namesArray = [];
function myclick(){
var readhere = Prompt ("Insert value");
namesArray.Push(readhere);
document.getElementById('demo').innerHTML= namesArray;
}
Du könntest es so machen:
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;
}
}
Ja, es ist möglich, dass Sie Ereignisse mit dem Argument onclick="sayHi()"
direkt in eine Vorlage binden, ähnlich wie mit Ihrem <body onload="start()">
- dieser Ansatz ähnelt Frameworks angle/vue/react/etc. Sie können auch <template>
verwenden, um 'dynamische' HTML-Dateien wie hier zu bearbeiten. Es ist nicht streng unauffällig, aber es ist akzeptabel für kleine Projekte
_function start() {
mydiv.innerHTML += "bar";
}
function sayHi() {
alert("hi");
}
_
_<body onload="start()">
<div id="mydiv" style="border: solid red 2px">
<span id="myspan" onclick="sayHi()">foo</span>
</div>
</body>
_