Код JavaScript работает только в IE

Question

Ниже приведен код, который создает новую строку текстовых полей, скажем, если строка указала 4 текстовых поля, приведенный ниже код создает дополнительную строку, как указано выше, когда я нажимаю кнопку [Добавить].

Следующий код работает только в IE, он не работает в любом другом браузере:

var delName = "ID=oth4del"; 
var t = oth4; 
t.str = "\r\n  <td><table class=\"query\" width=\"100%\">\r\n   <tr>\r\n   <td><input type=\"text\" name=\"q269r1491i~\" size=\"22\" maxlength=\"50\">\r\n   </td>\r\n   <td><input type=\"text\" name=\"q270r1447i~\" size=\"22\" maxlength=\"50\">\r\n   </td>\r\n   <td><input type=\"text\" name=\"q2765r6758i~\" size=\"22\" maxlength=\"50\">\r\n    </font></td>\r\n   </tr>\r\n  </table></td>\r\n  "; 
t.str = '<table width="100%"><tr chooserroot="true"><td><input type="button" value="Del" onclick="delrow(this)" '+delName+'></td>'+t.str+'</tr></table>'; 
t.cnt = 1; 
document.multis.push(t); 

Ошибка я получаю это:

TypeError: m.lastChild.insertAdjacentHTML is not a function [Break On This Error]

m.lastChild.insertAdjacentHTML('beforeBegin', m.str.replace(/~/g,++m.cnt)); 

Код для кнопки Добавить:

Следующие функции вызываются:

<table align="center"><tr><td><input type="button" value="Add" onclick="addrow(this)" ID="insurance1Add" 
></td></tr></table> 


document.multis = new Array(); 

function findparent(e,tn) { 
    while(e && e.parentNode && e.tagName && e.tagName.toLowerCase()!=tn) e = e.parentNode; 
    return e; 
} 

function addrow(b) 
{ 
    var m = findparent(b,"div"); 
    m.lastChild.insertAdjacentHTML('beforeBegin', m.str.replace(/~/g,++m.cnt));  
} 
///////////////////////////////////DEL ROW 
function delrow(b) 
{ 
    var table = findparent(b,"table"); 
    //var t = findparent(b,"div"); 
    //alert(t.cnt); 
    //alert(table.cnt); 
    table.parentNode.removeChild(table); 
} 

Uncaught TypeError: Object # has no method 'insertAdjacentHTML'

Кроме того, я еще раз проверил в Chrome и он дал мне ошибку: когда addRow называется

HTML сгенерированный код:

<DIV ID="Div_Insurance" > 
     <SPAN id="INSURANCE" style="display:inline;"> 


<div ID="insurance1" 
> 


<table border="1%" align="center" width="100%" style="display:none"><tr> 
     <td><table class="query" width="100%"> 
      <tr> 
      <td >Type</td> 
      <td><select name="q2485i~"> 
       <option value="5581">Pharmaceutical</option> 
       <option value="5582" selected>Long Term Care</option> 
       <option value="5583">Home Care</option> 
       <option value="5584">Other</option> 
       </select> 
      </td> 
      <td>Other</td> 
      <td><input type="text" name="q2764r6757i~" placeholder="Other Infomation" size="22" maxlength="50"></td> 
      </tr> 
      <tr> 
      <td>Name of Insurance</td> 
      <td><input type="text" name="q2438r5533i~" placeholder="Insurance Name" size="22" maxlength="50"> 
      </td> 
      <td>Contact Person</td> 
      <td><input type="text" name="q2439r5534i~" placeholder="Contact Person" size="22" maxlength="50"> 
      </td> 
      </tr> 
      <tr> 
      <td>Address</td> 
      <td><textarea cols="20" rows="4" maxlength="50" name="q2440r5535i~" placeholder="Address"></textarea> 
      </td> 
      <td>Phone</td> 
      <td><input type="text" name="q2441r5536i~" size="22" maxlength="50" onKeyUp="jm_phonemask(this)" onBlur="wphoneLength(this)"; placeholder="XXX-XXX-XXXX"> 
      </td> 
      </tr> 
      <tr> 
      <td>Fax</td> 
      <td><input type="text" name="q2442r5537i~" size="22" maxlength="50" onKeyUp="jm_phonemask(this)" onBlur="wphoneLength(this)"; placeholder="XXX-XXX-XXXX"> 
      </td> 
      <td>Email</td> 
      <td><input type="text" name="q2443r5538i~" size="22" maxlength="50" placeholder="xyz@xyz.xyz"> 
      </td> 
      </tr> 
     </table></td> 
     </tr></table> 

<table align="center"><tr><td><input type="button" value="Add" onclick="addrow(this)" ID="insurance1Add" 
></td></tr></table> 

</div> 

<script> 
var delName = "ID=insurance1del"; 
var t = insurance1; 
t.str = "\r\n  <td><table class=\"query\" width=\"100%\">\r\n   <tr>\r\n   <td >Type</td>\r\n   <td><select name=\"q2485i~\">\r\n    <option value=\"5581\">Pharmaceutical</option>\r\n    <option value=\"5582\" selected>Long Term Care</option>\r\n    <option value=\"5583\">Home Care</option>\r\n    <option value=\"5584\">Other</option>\r\n    </select>\r\n   </td>\r\n   <td>Other</td>\r\n   <td><input type=\"text\" name=\"q2764r6757i~\" placeholder=\"Other Infomation\" size=\"22\" maxlength=\"50\"></td>\r\n   </tr>\r\n   <tr>\r\n   <td>Name of Insurance</td>\r\n   <td><input type=\"text\" name=\"q2438r5533i~\" placeholder=\"Insurance Name\" size=\"22\" maxlength=\"50\">\r\n   </td>\r\n   <td>Contact Person</td>\r\n   <td><input type=\"text\" name=\"q2439r5534i~\" placeholder=\"Contact Person\" size=\"22\" maxlength=\"50\">\r\n   </td>\r\n   </tr>\r\n   <tr>\r\n   <td>Address</td>\r\n   <td><textarea cols=\"20\" rows=\"4\" maxlength=\"50\" name=\"q2440r5535i~\" placeholder=\"Address\"></textarea>\r\n   </td>\r\n   <td>Phone</td>\r\n   <td><input type=\"text\" name=\"q2441r5536i~\" size=\"22\" maxlength=\"50\" onKeyUp=\"jm_phonemask(this)\" onBlur=\"wphoneLength(this)\"; placeholder=\"XXX-XXX-XXXX\">\r\n   </td>\r\n   </tr>\r\n   <tr>\r\n   <td>Fax</td>\r\n   <td><input type=\"text\" name=\"q2442r5537i~\" size=\"22\" maxlength=\"50\" onKeyUp=\"jm_phonemask(this)\" onBlur=\"wphoneLength(this)\"; placeholder=\"XXX-XXX-XXXX\">\r\n   </td>\r\n   <td>Email</td>\r\n   <td><input type=\"text\" name=\"q2443r5538i~\" size=\"22\" maxlength=\"50\" placeholder=\"xyz@xyz.xyz\">\r\n   </td>\r\n   </tr>\r\n  </table></td>\r\n  "; 
t.str = '<table width="100%"><tr chooserroot="true"><td><input type="button" value="Del" onclick="delrow(this)" '+delName+'></td>'+t.str+'</tr></table>'; 
t.cnt = 1; 
document.multis.push(t); 
</script> 


     </SPAN> 
     </DIV> 

Answer 1

В вашей addrow() функции, сделать console.log(m.lastChild) и посмотреть что это.

Проверьте его nodeType. Я подозреваю, что это текстовый узел (т. Е. NodeType = 3).

Поскольку это текстовый узел, не Элементный узел, то, конечно, у него не было бы метода insertAdjacentHTML.

Список литературы:

• LastChild: https://developer.mozilla.org/en-US/docs/DOM/Node.lastChild

• NODETYPE: https://developer.mozilla.org/en-US/docs/DOM/Node.nodeType

• insertAdjacentHTML: https://developer.mozilla.org/en-US/docs/DOM/element.insertAdjacentHTML

---

Вот классический фрагмент старой школы, который вы, возможно, захотите сохранить. После того, как вы получите lastChild (или любые другие варианты), убедитесь, что вы работаете с элементом Element Node.

function addrow(b) { 
    var m = findparent(b,"div"), 
     lastChildElement = m.lastChild; 

    // the old-school routine 
    while (lastChildElement && lastChildElement.nodeType !== 1) { 
     lastChildElement = lastChildElement.previousSibling; 
    } 

    if (lastChildElement) { 
     lastChildElement.insertAdjacentHTML('beforeBegin', m.str.replace(/~/g,++m.cnt));  
    } else { 
     // handle this case... 
    } 
} 

И, как вы, наверное, уже догадались, противоположный конец будет включать firstChild и nextSibling.