내부에 추가할 수 있습니까?후손의 이벤트 청취자를 파괴하지 않고 HTML?
다음 예시 코드에 첨부합니다.onclick"foo" 텍스트를 포함하는 범위에 대한 이벤트 핸들러.핸들러는 익명 함수로, 다음과 같이 팝업됩니다.alert().
그러나 상위 노드에 할당하는 경우innerHTML,이것.onclick이벤트 핸들러가 파괴됨 - "foo"를 클릭하면 알림 상자가 뜨지 못합니다.
고칠 수 있습니까?
<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>
를 사용하면 이벤트 수신기가 보존되며, 모든 주요 브라우저에서 지원됩니다.간단한 한 줄 교체입니다..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);
그'beforeend'인수는 요소에서 HTML 내용을 삽입할 위치를 지정합니다.옵션은'beforebegin','afterbegin','beforeend',그리고.'afterend'. 해당 위치는 다음과 같습니다.
<!-- beforebegin -->
<div id="mydiv">
<!-- afterbegin -->
<p>Existing content in #mydiv</p>
<!-- beforeend -->
</div>
<!-- afterend -->
유감스럽게도, 다음에 할당된.innerHTML추가하려고 해도 모든 자식 요소가 파괴됩니다자식 노드(및 이벤트 핸들러)를 보존하려면 DOM 기능을 사용해야 합니다.
function start() {
var myspan = document.getElementById("myspan");
myspan.onclick = function() { alert ("hi"); };
var mydiv = document.getElementById("mydiv");
mydiv.appendChild(document.createTextNode("bar"));
}
편집: 밥의 해결책, 댓글로.답을 올려, 밥!인정받으세요. :-)
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);
}
}
지금은 2012년이고, jQuery는 이것을 정확히 하고, 현재 콘텐츠에 영향을 주지 않고 콘텐츠를 추가하는 추가 및 접두사 기능을 가지고 있습니다.아주 유용합니다.
저는 화려한 돔을 사용하는 것보다 코드가 적고 읽기 쉽기 때문에 문자열로 삽입하기 위해 마크업을 만들었습니다.
그 다음에 제가 안으로 만들었어요.임시 요소의 HTML은 그 요소의 하나뿐인 자식을 가져가서 몸에 붙일 수 있게 해줍니다.
var html = '<div>';
html += 'Hello div!';
html += '</div>';
var tempElement = document.createElement('div');
tempElement.innerHTML = html;
document.getElementsByTagName('body')[0].appendChild(tempElement.firstChild);
jquery(v1.3)와 같은 javascript 라이브러리를 사용하여 돔 조작을 수행하는 경우 다음과 같은 핸들러를 설정하는 라이브 이벤트를 사용할 수 있습니다.
$("#myspan").live("click", function(){
alert('hi');
});
어떤 종류의 잡동사니 조작 중에도 항상 그 선택기에 적용될 겁니다라이브 이벤트는 docs.jquery.com/events/live 에서 jquery 조작을 참조하십시오. docs.jquery.com/manipulation
또 다른 대안이 있습니다.setAttribute이벤트 청취자를 추가하는 것보다.다음과 같은 경우:
<!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>예 태그 속성을 사용하여 이벤트를 바인딩하는 경우 가능합니다.onclick="sayHi()"당신과 비슷한 템플릿에 직접적으로<body onload="start()">- 이 접근법은 프레임워크 각도/뷰/react/등과 유사합니다.여기처럼 'dynamic' html에서 조작할 수도 있습니다.JS는 엄격하지 않지만 소규모 프로젝트는 허용 가능합니다.
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>이벤트 핸들러를 잃는 것은 자바스크립트가 DOM을 처리하는 방식의 버그입니다.이 동작을 방지하기 위해 다음을 추가할 수 있습니다.
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
}
가장 쉬운 방법은 배열을 사용하고 요소를 밀어 넣은 다음 배열 후속 값을 동적으로 배열에 삽입하는 것입니다.여기 내 코드가 있습니다.
var namesArray = [];
function myclick(){
var readhere = prompt ("Insert value");
namesArray.push(readhere);
document.getElementById('demo').innerHTML= namesArray;
}
이렇게 할 수 있습니다.
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;
}
}
뭐 그런 거.HTML += '원하는 대로 추가';
그것은 나에게 효과가 있었다.이 솔루션을 사용하여 입력 텍스트에 버튼을 추가했습니다.
헤더 및 데이터가 포함된 모든 객체 배열.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>
저는 게으른 프로그래머입니다.추가 타이핑인 것 같아서 DOM을 사용하지 않습니다.저는 코드가 적을수록 좋습니다."foo"를 대체하지 않고 "bar"를 추가하는 방법은 다음과 같습니다.
function start(){
var innermyspan = document.getElementById("myspan").innerHTML;
document.getElementById("myspan").innerHTML=innermyspan+"bar";
}
언급URL : https://stackoverflow.com/questions/595808/is-it-possible-to-append-to-innerhtml-without-destroying-descendants-event-list
'source' 카테고리의 다른 글
| MySQL 사용자 백업 (0) | 2023.09.21 |
|---|---|
| OLD에서 각각의 차이를 확인하는 방법.* MySQL 트리거에서 NEW.* 열로 이동하시겠습니까? (0) | 2023.09.21 |
| Vim endent xml 파일 (0) | 2023.09.21 |
| Oracle 19c에서 large json을 clob에 반환할 때 ORA-40478 (0) | 2023.09.21 |
| VBA를 사용하여 아래 셀이 비어 있는지 확인 (0) | 2023.09.21 |