リスト項目のinnerHTMLを変更するにはどうすればよいですか？

Question

OKだから私は、HTML

<ul class="wsite-menu-default"> 
    <li id="lis1" class="wsite-menu-item-wrap wsite-nav-1" style="position: relative;"> 
<a href="#" class="wsite-menu-item" style="position: relative;"> 
    Home 
</a> 
</li> 
<li id="lis2" class="wsite-menu-item-wrap wsite-nav-2" style="position: relative;"> 
<a href="#" class="wsite-menu-item" style="position: relative;"> 
    Images 
</a> 
</li> 
<li id="lis3" class="wsite-menu-item-wrap wsite-nav-3" style="position: relative;"> 
<a href="#" class="wsite-menu-item" style="position: relative;"> 
    Facilities 
</a> 
</li> 
<li id="lis4" class="wsite-menu-item-wrap wsite-nav-4" 
style="position: relative;"> 
<a href="#" class="wsite-menu-item" style="position: relative;"> 
    Contact 
</a> 
</li> 
</ul> 

のこのコードを持っていると私は何をしようとしていることは要素の機能に影響を与えることなく、「メイン」にfirtリスト項目「ホーム」のテキストを変更することです。私はこれまで多くのことを試してきました。しかし、これは私が試した最後のものである：

<script> 
document.getElementById("lis1").innerHTML = "<a href="#" class="wsite-menu-item" style="position: relative;">Main</a>"; 
</script> 

は、事前にありがとうございます。

Answer 1

textContentだけを変更してください。innerHTMLではありません。あなたは '文字列全体ラップする `： ` el.innerHTML =' `" ``エスケープまたは使用する必要が

let elem = document.querySelector('#lis1 a'); 
 
    elem.textContent = 'Main';

<ul class="wsite-menu-default"> 
 
    <li id="lis1" class="wsite-menu-item-wrap wsite-nav-1" style="position: relative;"> 
 
    <a href="#" class="wsite-menu-item" style="position: relative;"> 
 
    Home 
 
</a> 
 
    </li> 
 
    <li id="lis2" class="wsite-menu-item-wrap wsite-nav-2" style="position: relative;"> 
 
    <a href="#" class="wsite-menu-item" style="position: relative;"> 
 
    Images 
 
</a> 
 
    </li> 
 
    <li id="lis3" class="wsite-menu-item-wrap wsite-nav-3" style="position: relative;"> 
 
    <a href="#" class="wsite-menu-item" style="position: relative;"> 
 
    Facilities 
 
</a> 
 
    </li> 
 
    <li id="lis4" class="wsite-menu-item-wrap wsite-nav-4" style="position: relative;"> 
 
    <a href="#" class="wsite-menu-item" style="position: relative;"> 
 
    Contact 
 
</a> 
 
    </li> 
 
</ul>