从列表项文本生成href

Question

UPDATED :

I have a sidebar which extracts all existing h3 tags and displays the text in a list. I would like these list items to have the same id and href as the text.

Example list item:

Current: <li>Heading One</li>

Desired: <li id="heading-one"><a href="#heading-one">Heading One</li>

HTML:

<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>

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";

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

    });
});

Desired result:

<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:

https://codepen.io/Crawlinson/pen/OJLjyGe

Answer 1

add this you solution

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

https://jsfiddle.net/t5dw0qh7/1/

 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 += "<a href=#"+title.replace(' ','-').toLowerCase()+">"+title+"</a>"; }); }); }); 

 <script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script> <div id="content"> <h3>Example One</h3> <h3>Example Two</h3> <h3>Example Three</h3> </div> <div id="sidemenu-container"> <div class="wpb_wrapper"> <div class="wpb_wrapper"> </div> </div> </div> 

Answer 2

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');
        var a = document.createElement('a');
        var id =  title.toLowerCase().split(" ").join('-');
        ul.appendChild(li);
        a.href = "#" + id;
        li.id = id

        a.innerHTML += title;
        li.appendChild(a);
    });

  });
});

Answer 3

This is the exact solution of your problem

<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>

Hope it works . PLease check it out .