javascript - 从列表项文本生成 href

Question

更新：

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

示例列表项：

当前的：<li>Heading One</li>

期望：<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;
        });

    });
});

期望的结果：

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

JSF中：

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

标签： javascriptjqueryhtmlcss

Answer 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');
        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);
    });

  });
});