Javascript 从列表项文本生成href

已更新：

我有一个侧边栏，它提取所有现有的h3标签，并在列表中显示文本。我希望这些列表项与文本具有相同的id和href

示例列表项：

<div id="content">
    <h3 id="example-one">Example One</h3>
    <h3 id="example-two">Example Two</h3>
    <h3 id="example-three">Example Three</h3>
</div>

<div id="sidemenu-container">
    <div class="wpb_wrapper">
        <div class="wpb_wrapper">
        </div>
    </div>
</div>

jQuery(function($) {
    $(document).ready(function(){

        // Create array from h3s found in main content
        let nodeList = document.getElementById('content').querySelectorAll('h3');
        let list = [];
        nodeList.forEach(function(val){
            list.push(val.innerHTML)
        })

        // Create unordered list
        var ul = document.createElement('ul');

        // Append unordered list to sidebar
        document.getElementById('sidemenu-container').getElementsByClassName("wpb_wrapper")[1].appendChild(ul).id = "top-menu";

        // Append list items to unordered list
        list.forEach(function(title){
            var li = document.createElement('li');
            ul.appendChild(li);
            li.innerHTML += title;
        });

    });
});

<div id="content">
    <h3 id="example-one">Example One</h3>
    <h3 id="example-two">Example Two</h3>
    <h3 id="example-three">Example Three</h3>
</div>

<div id="sidemenu-container">
    <div class="wpb_wrapper">
        <ul>
            <li><a href="#example-one">Example One</a></li>
            <li><a href="#example-two">Example Two</a></li>
            <li><a href="#example-three">Example Three</a></li>
        </ul>
    </div>
</div>

当前：

标题一

所需：

JSFiddle:

<div id="content">
    <h3 id="example-one">Example One</h3>
    <h3 id="example-two">Example Two</h3>
    <h3 id="example-three">Example Three</h3>
</div>

<div id="sidemenu-container">
    <div class="wpb_wrapper">
        <div class="wpb_wrapper">
        </div>
    </div>
</div>

jQuery(function($) {
    $(document).ready(function(){

        // Create array from h3s found in main content
        let nodeList = document.getElementById('content').querySelectorAll('h3');
        let list = [];
        nodeList.forEach(function(val){
            list.push(val.innerHTML)
        })

        // Create unordered list
        var ul = document.createElement('ul');

        // Append unordered list to sidebar
        document.getElementById('sidemenu-container').getElementsByClassName("wpb_wrapper")[1].appendChild(ul).id = "top-menu";

        // Append list items to unordered list
        list.forEach(function(title){
            var li = document.createElement('li');
            ul.appendChild(li);
            li.innerHTML += title;
        });

    });
});

<div id="content">
    <h3 id="example-one">Example One</h3>
    <h3 id="example-two">Example Two</h3>
    <h3 id="example-three">Example Three</h3>
</div>

<div id="sidemenu-container">
    <div class="wpb_wrapper">
        <ul>
            <li><a href="#example-one">Example One</a></li>
            <li><a href="#example-two">Example Two</a></li>
            <li><a href="#example-three">Example Three</a></li>
        </ul>
    </div>
</div>

添加此解决方案

li.innerHTML += "<a href=#"+title.replace(' ','-').toLowerCase()+">"+title+"</a>";

li.innerHTML+=”；

jQuery（函数（$）{
$（文档）.ready（函数（）{
//从主内容中找到的H3创建数组
让nodeList=document.getElementById（'content'）.querySelectorAll（'h3'）；
让列表=[]；
节点列表forEach（函数（val）{
list.push（val.innerHTML）
})
//创建无序列表
var ul=document.createElement（'ul'）；
//将无序列表附加到侧栏
document.getElementById（'sidemenu-container'）.getElementsByClassName（“wpb_包装”）[1].appendChild（ul.id=“顶部菜单”；
//将列表项附加到无序列表
list.forEach（函数（标题）{
var li=document.createElement（'li'）；
ul.儿童（li）；
li.innerHTML+=“”；
});
});
});

例一
例二
例三
这就是您问题的确切解决方案

<script type="text/javascript">

      jQuery(function($) {
        $(document).ready(function(){

            // Create array from h3s found in main content
            let nodeList = document.getElementById('content').querySelectorAll('h3');
            let list = [];
            nodeList.forEach(function(val){
              list.push(val.innerHTML)
            })

            // Create unordered list
            var ul = document.createElement('ul');

            // Append unordered list to sidebar
            document.getElementById('sidemenu-container').getElementsByClassName("wpb_wrapper")[1].appendChild(ul).id = "top-menu";
              console.log("list" , list);
            // Append list items to unordered list
            list.forEach(function(title){
              var li = document.createElement('li');
              ul.appendChild(li); 
              var a = document.createElement('a');
              li.appendChild(a);
          title = title.split(" ").join("-");
           var id1 = "#" + title;
              $(a).attr('id',  id1);
              a.innerHTML += title;
            });

          });
      });


    </script>


jQuery（函数（$）{
$（文档）.ready（函数（）{
//从主内容中找到的H3创建数组
让nodeList=document.getElementById（'content'）.querySelectorAll（'h3'）；
让列表=[]；
节点列表forEach（函数（val）{
list.push（val.innerHTML）
})
//创建无序列表
var ul=document.createElement（'ul'）；
//将无序列表附加到侧栏
document.getElementById（'sidemenu-container'）.getElementsByClassName（“wpb_包装”）[1].appendChild（ul.id=“顶部菜单”；
控制台日志（“列表”，列表）；
//将列表项附加到无序列表
list.forEach（函数（标题）{
var li=document.createElement（'li'）；
ul.儿童（li）；
var a=document.createElement（'a'）；
李.儿童（a）；
title=title.split（“”）。join（“”）；
变量id1=“#”+标题；
$（a）.attr（'id'，id1）；
a、 innerHTML+=标题；
});
});
});

希望它能起作用。请检查一下
 为什么你想让某些东西链接到它自己…？虽然这很容易做到（一旦你知道怎么做，很明显），但这样做是没有意义的，因为——正如Jack在上面评论的那样——这将创建一个有效链接到它自己的元素，我看不出它有什么作用。@JackBashford，因为我希望页面向下移动到页面的该部分。正如@Ilanchemoul所说，您很可能希望h3元素中有id，这样单击链接将滚动到标题。@Bakaka您的问题中没有将id设置为标题