アンカータグをJavascriptでリストアイテムに挿入するにはどうすればよいですか？

Question

私は、リスト項目が、私はJavaScriptでクラス名を経由してアンカータグを挿入することをHTML5

<li class="navi"> HOME </li> 

にクラス名を持っているのリストアイテムを持っています。アンカーはここにある：

<a href="#hOME">HTML</a> 

私はこれがために行うことができますか：あなたはjQueryのを使用している場合

**<li class="navi"><a href="#HOME" >HOM E</a> </li>** 

Answer 1

純粋なバニラJavascriptを：完全なコード例なし

function makelink() { 
 
    var li = document.getElementsByClassName('navi')[0]; 
 
    li.innerHTML = '<a href="#hOME">HTML</a>'; 
 
}

<ul> 
 
<li class="navi"> HOME </li> 
 
</ul> 
 

 
<button onclick="makelink()">click here to make HOME link</button>

Answer 2

、あなたがこれを行うことができます：

$li = $('li.navi'); 
$li.html("<a href='#"+ $li.text() +"'>"+ $li.text() +"</a>"); 

Answer 3

この

をお試しください

$(document).ready(function(){ 
 
\t $("ul").append("<li class='navi'><a href='#HOME' >HOM E</a></li>") 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<ul> 
 
<li class="navi"> HOME </li> 
 

 
</ul>

Answer 4

あなたは私たちが推測されている、しようとしているものを示します。しかし、あなたは試みることができる：

$('.navi').append('<a href="#HOME">HOME</a>'); 

Answer 5

Document.createElementとNode.appendChild

var listItem = document.querySelector('navi'); 
var name = listItem.innerText; 
var anchor = document.createElement('a'); 
var anchor.href = "#"+name; 
var anchor.innerText = name; 
listItem.appendChild(newNode);