EdgeのDOM APIに関する問題

Question

Javascriptでwebsocketを使用してチャットアプリケーションを作成しました。私はこれが完全にクロスブラウザをサポートしていないと思った。しかし、私は、Chrome/FirefoxとEdgeの間のDOM操作APIの違いによって引き起こされるような問題に遭遇しました。私のアプリはChromeとFirefoxでは完全に動作しますが、Edgeではエラーが発生します。

例HTMLのhtmlファイルからテンプレート：

function addMessage(message){ 
    let date = new Date(); 
    let mtpl = document.getElementById('message-template').content.cloneNode(true); 
    mtpl.getElementById('message-body').innerHTML = message.message; 
    mtpl.getElementById('message-user').innerHTML = `${message.client} | ${date.toString()}`; 
    messages.appendChild(mtpl); 
    //Scroll down on overflow 
    messages.scrollTop = messages.scrollHeight; 
} 

エッジからスローされるエラーは次のとおりです： SCRIPT438：オブジェクトはしていませんJSファイル操作から

<template id ="message-template"> 
    <li class="media" style="margin-top:0px;"> 
     <div class="media-body"> 
       <a class="pull-left" href="#"> 
        <img class="media-object img-circle " src="" /> 
       </a> 
       <div class="media-body"> 
        <span id='message-body'> </span> 
        <br /> 
        <small class="text-muted" id="message-user"></small> 
        <hr /> 
       </div>    
     </div> 
    </li> 
</template> 

例Javascriptと、このテンプレートを投稿プロパティまたはメソッド 'getElementById'をサポート

行を指す：

mtpl.getElementById('message-body').innerHTML = message.message; 

ので...私はマイクロソフトからDOM APIを見上げ、そしてのdocument.getElementByIdが明らかにgetElementByIdをメソッドを持っていないIHTMLElementを返すことが表示されます、私の質問は：

どのようにすることができますEdgeで作業するようにコードを変更しますか？ （これはjQueryを使わないと理想的ですが、できない場合は教えてください）

注：私はIEについては気にしません。商業の。私のコードの多くはES6で書かれていますが、IEではうまく動作しません。

Answer 1

代わりに.querySelector（）関数を使用することをお勧めします。

ので、

mtpl.getElementById('message-body').innerHTML = message.message; 

は

mtpl.querySelector('#message-body').innerHTML = message.message; 

そして

mtpl.getElementById('message-user').innerHTML = `${message.client} | ${date.toString()}`; 

が

mtpl.querySelector('#message-user').innerHTML = `${message.client} | ${date.toString()}`;