web-dev-qa-db-ja.com

子孫のイベントリスナーを破壊せずにinnerHTMLに追加することは可能ですか？

次のコード例では、テキスト「foo」を含むスパンにonclickイベントハンドラーをアタッチします。ハンドラーは、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>
javascripthtmlinnerhtmldom-events
90
mike

残念ながら、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);
    }
}
114
Ben Blank

.insertAdjacentHTML()を使用すると、イベントリスナーが保持され、 すべての主要なブラウザーでサポートされます 。 .innerHTMLの簡単な1行の置換です。

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 -->
48
Josh de Leeuw

現在、2012年であり、jQueryには現在のコンテンツに影響を与えずにコンテンツを追加する、まさにこれを行うappendおよびprepend関数があります。非常に便利。

4
rocketsarefast

少し（しかし関連する）余地として、jquery（v1.3）などのjavascriptライブラリを使用してdom操作を行う場合、次のようなハンドラーをセットアップするライブイベントを利用できます。

 $("#myspan").live("click", function(){
  alert('hi');
});

あらゆる種類のjquery操作中に常にそのセレクタに適用されます。ライブイベントについては、 docs.jquery.com/events/live jquery操作については、 docs.jquery.com/manipulation を参照してください。

3
Cargowire

something.innerHTML + = '好きなものを追加';

それは私のために働いた。このソリューションを使用して入力テキストにボタンを追加しました

2
KawaiKx

派手なdomを扱うよりもコードが少なく読みやすいので、文字列として挿入するマークアップを作成しました。

次に、一時要素のinnerHTMLを作成して、その要素の唯一の子を取り、本文に添付できるようにしました。

var html = '<div>';
html += 'Hello div!';
html += '</div>';

var tempElement = document.createElement('div');
tempElement.innerHTML = html;
document.getElementsByTagName('body')[0].appendChild(tempElement.firstChild);
2
Eneroth3

別の方法があります：イベントリスナーを追加するのではなく、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>
1
Frank Conijn

ヘッダーとデータを含むオブジェクト配列の場合。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>
0
AKS

最も簡単な方法は、配列を使用し、そこに要素をプッシュしてから、配列の後続の値を動的に配列に挿入することです。ここに私のコードがあります：

var namesArray = [];

function myclick(){
    var readhere = Prompt ("Insert value");
    namesArray.Push(readhere);
    document.getElementById('demo').innerHTML= namesArray;
}
0
Anoop Anson

次のようにできます：

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;
    }
}
0
Rishabh gupta

IMOでは、イベントハンドラを失うことは、Javascriptが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
}
0
Yes - that Jake.

はい、onclick="sayHi()"のようなテンプレートで引数<body onload="start()">を直接使用してイベントをバインドすることができます。このアプローチは、フレームワークのangle/vue/react/etcに似ています。 <template> を使用して、 here のような 'dynamic' htmlを操作することもできます。控えめなjsではありませんが、小規模なプロジェクトでは acceptable です。

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>
0
Kamil Kiełczewski