বংশধরদের ইভেন্ট শ্রোতাদের বিনষ্ট না করেই কি অভ্যন্তরীণ এইচটিএমএল যুক্ত করা সম্ভব?

112

নিম্নলিখিত উদাহরণ কোডে, আমি 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>

— মাইক
সূত্র

এই প্রশ্নটি 'একটি ফর্মের সাথে নতুন ক্ষেত্রগুলি যুক্ত করে ব্যবহারকারী ইনপুট মুছে দেয়' সমস্যা সম্পর্কিত। নির্বাচিত উত্তরগুলি খুব সুন্দরভাবে এই দুটি সমস্যা সমাধান করে।

— ম্যাটটি

ইভেন্ট প্রতিনিধিদের এই সমস্যা মোকাবেলা করতে ব্যবহার করা যেতে পারে।

— dasfdsa

126

দুর্ভাগ্যক্রমে, অ্যাসাইনমেন্টের innerHTMLফলে সমস্ত শিশু উপাদান ধ্বংস হয়ে যায়, এমনকি আপনি যুক্ত করার চেষ্টা করছেন। আপনি যদি শিশু নোডগুলি (এবং তাদের ইভেন্ট হ্যান্ডলারগুলি) সংরক্ষণ করতে চান তবে আপনাকে ডিওএম ফাংশনগুলি ব্যবহার করতে হবে :

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);
    }
}

— বেন ফাঁকা
সূত্র

এইচটিএমএল একটি স্বেচ্ছাসেবক ব্লব সংযোজন করতে পারে এমন বিকল্প আছে কি?

— মাইক

64

নতুন কনটেন্ট = ডকুমেন্ট.ক্রেটইলেট ('ডিভ'); newcontent.innerHTML = সালিসি_ব্লব; যখন (newcontent.firstChild) mydiv.appendChild (newcontent.firstChild);

— বোবিনস

সুন্দর, বব! আপনি যদি এটি একটি ভাল-ফর্ম্যাট উত্তর হিসাবে পোস্ট করেন তবে আমি এটি নির্বাচন করব।

— মাইকে

@ ববিন্স - আমি আপনার কৌশলটি দিয়ে আমার উত্তর আপডেট করেছি, যেহেতু আপনি এখনও এটি পোস্ট করেন নি। আপনি যদি নিজের উত্তর তৈরি করেন তবে এগিয়ে যান এবং আমার পিছনে রোল করুন। :-)

— বেন ফাঁকা

2

ওহ, একটি শেষ কথা, দুর্ঘটনাক্রমে গ্লোবাল ছড়িয়ে পড়ার জন্য আপনি "ভারী মাইস্প্যান", "ভার নিউ নিউজেন্ট" ইত্যাদি চাইবেন।

— ববিনস

85

.insertAdjacentHTML()ইভেন্ট শ্রোতা সংরক্ষণ করে ব্যবহার করে এবং সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত । এটি এর জন্য একটি সহজ এক-লাইন প্রতিস্থাপন .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 -->

— জোশ ডি লিউউ
সূত্র

তুমি আমার দিন বাঁচিয়েছ!

— টারাল আসগর

সব থেকে ভালো সমাধান. ধন্যবাদ!

— দাউদজি

3

এখন, এটি 2012, এবং jQuery এর কার্যকরী সংযোজন এবং প্রিপেন্ড রয়েছে যা সঠিকভাবে এটি করে, বর্তমান সামগ্রীকে প্রভাবিত না করে সামগ্রী যুক্ত করে। খুব দরকারী.

— rocketsarefast
সূত্র

7

.insertAdjacentHTMLআইই 4 সাল থেকে প্রায় হয়েছে

— ইসাইলিজা

1

@ টিন্যাচ হ্যাঁ এটি হ'ল, এটি তাদের জাভাস্ক্রিপ্ট সাইটটি সবচেয়ে ভাল নথী করেছে: বিকাশকারী.মোজিলা.আর.ইন-

— জর্ডন বেডওয়েল

2

@ জর্ডন বেডওয়েল, আমি কেন আগে বলেছিলাম তা কেন সত্য বলে আমার কোন ধারণা নেই। আপনি 100% ঠিক আছেন। আমার মনে হয় এমন সময় আমি সংক্ষেপে এটি খতিয়ে দেখলাম এবং এটি খুঁজে পেল না, তবে ... সত্যি বলতে আমার কোনও অজুহাত নেই। এসেইলিজা এমনকি সেই পৃষ্ঠাটিতে লিঙ্ক করে।

— টিনিচ

ওপি jQuery সম্পর্কে কথা বলছে না

— আন্দ্রে মার্কোন্ডিস টিক্সিরা

2

সামান্য (তবে সম্পর্কিত) হিসাবে সহায়তা করুন, আপনি যদি নিজের ডোম ম্যানিপুলেশন করতে জাভাস্ক্রিপ্ট লাইব্রেরি যেমন jquery (v1.3) ব্যবহার করেন তবে আপনি লাইভ ইভেন্টগুলি ব্যবহার করতে পারেন যার মাধ্যমে আপনি একটি হ্যান্ডলার সেটআপ করেন:

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

এবং যেকোন ধরণের জিকিউরি ম্যানিপুলেশনের সময় এটি সর্বদা নির্বাচককে প্রয়োগ করা হবে। লাইভ ইভেন্টগুলির জন্য দেখুন: docs.jquery.com/events/live jQuery ম্যানিপুলেশন জন্য দেখুন: docs.jquery.com/manipulation

— Cargowire
সূত্র

1

ওপি jQuery সম্পর্কে কথা বলছে না

— আন্ড্রে মার্কাডিস টিক্সিরা

2

অভিনব ডোম স্টাফ নিয়ে কাজ করার চেয়ে কম কোড এবং পড়া সহজ since

তারপরে আমি এটিকে একটি অস্থায়ী উপাদানটির অভ্যন্তরীণ এইচটিএমএল তৈরি করেছিলাম যাতে আমি সেই উপাদানটির একমাত্র একমাত্র শিশুকে নিতে পারি এবং শরীরে সংযুক্ত করতে পারি।

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

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

— Eneroth3
সূত্র

2

something.innerHTML + = 'আপনি যা চান তা যুক্ত করুন';

এটা আমার জন্য কাজ করে। আমি এই সমাধানটি ব্যবহার করে একটি ইনপুট পাঠ্যে একটি বোতাম যুক্ত করেছি

— KawaiKx
সূত্র

আপনাকে ধন্যবাদ জানাতেই এটি সবচেয়ে সহজ পদ্ধতি ছিল!

— ডেমো 7 আপ

4

এটি সমস্ত ঘটনা ধ্বংস করে দেয়।

— তুরাল আসগর

1

এটি আসলে কীভাবে সমাধান হয়? এটি সমস্ত ঘটনা ধ্বংস!

— ডেনিশ

1

এর অন্য একটি বিকল্প রয়েছে: 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

হ্যাঁ আপনি যদি ট্যাগ অ্যাট্রিবিউট ব্যবহার করে ইভেন্টগুলিকে onclick="sayHi()"সরাসরি যেমন টেম্পলেটে বাঁধেন তবে এটি সম্ভব <body onload="start()">- ফ্রেমওয়ার্কের কৌনিক / মান / প্রতিক্রিয়া / ইত্যাদির অনুরূপ এই পদ্ধতির। আপনি এখানে <template> 'ডায়নামিক' এইচটিএমএল চালনার জন্যও ব্যবহার করতে পারেন । এটি কঠোর আপত্তিজনক জেএস নয় তবে এটি ছোট প্রকল্পগুলির জন্য গ্রহণযোগ্য

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

ইভেন্ট হ্যান্ডলারগুলি হারাতে হচ্ছে, আইএমও, জাভাস্ক্রিপ্ট যেভাবে ডিওএম পরিচালনা করে তার মধ্যে একটি বাগ। এই আচরণটি এড়াতে, আপনি নিম্নলিখিতগুলি যুক্ত করতে পারেন:

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
}

— হ্যাঁ - যে জ্যাক।
সূত্র

2

আমি এটিকে ত্রুটি হিসাবে বিবেচনা করি না। কোনও উপাদান প্রতিস্থাপনের অর্থ আপনি এটি সম্পূর্ণরূপে প্রতিস্থাপন করুন। আগে যা ছিল তা উত্তরাধিকার সূত্রে প্রাপ্ত হওয়া উচিত নয়।

— ডায়োডিয়াস - জেমস ম্যাকফারলেন

তবে আমি কোনও উপাদান প্রতিস্থাপন করতে চাই না; আমি কেবল পিতামাতার সাথে নতুন যুক্ত করতে চাই।

— মাইক

আপনি যদি উপাদানটি প্রতিস্থাপন করছিলেন তবে আমি সম্মতি জানাব, @ ডায়োডিয়াস। এটি ইভেন্ট হ্যান্ডলারটি অন্তর্নিহিত এইচটিএমএল নয়, .innerHtml এর পিতামাতা।

— হ্যাঁ - যে জ্যাক

2

অভ্যন্তরীণ এইচটিএমএল এর মালিক হ্যান্ডলারগুলি হারাবেন না যখন এর অভ্যন্তরীণ এইচটিএমএল পরিবর্তিত হবে, কেবল তার সামগ্রীতে কিছু আছে। এবং জাভাস্ক্রিপ্টটি জানে না যে আপনি কেবল নতুন বাচ্চাদের সংযোজন করছেন, যেহেতু "x.innerHTML + = y" স্ট্রিং অপারেশনের জন্য কেবল সিনট্যাকটিকাল চিনি "x.innerHTML = x.innerHTML + y"।

— ববিনস

আপনাকে পুনরায় সংযুক্ত করার দরকার নেই mydiv.onclick। কেবলমাত্র অভ্যন্তরীণ স্প্যানের অনক্লিকটি ওভাররাইড হয়ে যায় innerHTML +=।

— ক্রিসেন্ট ফ্রেশ

0

আপনি এটি এর মতো করতে পারেন:

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;
    }
}

— Habষভ গুপ্ত
সূত্র

0

সবচেয়ে সহজ উপায় হ'ল একটি অ্যারে ব্যবহার করা এবং এতে উপাদানগুলিকে পুশ করা এবং তারপরে অ্যারে পরবর্তী মানগুলি গতিশীলভাবে sertোকানো। আমার কোডটি এখানে:

var namesArray = [];

function myclick(){
    var readhere = prompt ("Insert value");
    namesArray.push(readhere);
    document.getElementById('demo').innerHTML= namesArray;
}

— অনুপ আনসন
সূত্র

0

শিরোনাম এবং ডেটা সহ যে কোনও অবজেক্ট অ্যারের জন্য।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>

— AKS
সূত্র

-5

আমি একটি অলস প্রোগ্রামার। আমি ডোম ব্যবহার করি না কারণ এটি অতিরিক্ত টাইপ করার মতো বলে মনে হয়। আমার কাছে কম কোডটি তত ভাল। "Foo" প্রতিস্থাপন না করে আমি কীভাবে "বার" যুক্ত করব:

function start(){
var innermyspan = document.getElementById("myspan").innerHTML;
document.getElementById("myspan").innerHTML=innermyspan+"bar";
}

— lucious
সূত্র

15

এই প্রশ্নটি ইভেন্ট হ্যান্ডেলারদের হারানো ছাড়া এটি কীভাবে করবেন তা জিজ্ঞাসা করছে, সুতরাং আপনার উত্তর প্রাসঙ্গিক নয়, এবং

— বিটিডব্লিউ এটিই

2

এটি হাসিখুশি যে এই সম্পূর্ণ ভুল উত্তরে অতিরিক্ত টাইপিংকে ন্যায়সঙ্গত হিসাবে এড়িয়ে চলা উল্লেখ করা হয়েছে, প্রায় অর্ধেক কোড অপ্রয়োজনীয়।

— জে এলআরিশ