javascript - How can i change the innerHTML of a list item? -
ok have code of 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>
and trying change text of firt list item "home" "main" without affecting functionality of element. have tried many things far. however, last thing tried:
<script> document.getelementbyid("lis1").innerhtml = "<a href="#" class="wsite-menu-item" style="position: relative;">main</a>"; </script>
thank in advance.
change it's textcontent
, not whole 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>
Comments
Post a Comment