将来自文本区域的输入显示为 HTML，并将 ID 分配给 HTML 元素

Question

我正在使用一个函数将字符串从模式中的 textArea 添加到数组，然后使用 innerHTML (which I learned here) 将它们打印到 DOM。该函数通过模态框上的按钮调用。

function setArray( ){
      let textAreaElement = document.getElementById('textToArray');
      let listArray = textAreaElement.value.trim().split('\n');
      console.log(listArray);
      document.getElementById('PrintToSidebar').innerHTML = listArray.join("<p>");//I want to add IDs in the <p> tags created here
      modal.style.display = "none";
    }

这似乎运作良好，但我还想为每个 <p> 设置一个 ID，ID 等于字符串值。

例如，如果 listArray = ["Line 1", "Line 2"]，那么我想要的 innerHTML 将导致：

<p id="line-1">Line 1</p>
<p id="line-2">Line 2</p>

我的搜索似乎表明我需要使用 setAttribute 方法。但我也在想我需要先循环遍历 listArray。

我只接触了 Javascript 几天（实际上对编码完全陌生），因此详细的解决方案将非常有帮助。谢谢！

Answer 1

您可以循环数组并借助内置函数document.createElement("p) 动态创建p 元素，然后在textContent 属性上设置文本，在id 属性上设置id新创建的元素。

我使用trim() 删除字符串开头和结尾的空格，并使用replace 将空格替换为-。 replace 第一个参数是一个正则表达式，您可以在 Link 上了解更多信息

最后一步是将新创建的元素附加到 dom。 吨

/* Appends the element to DOM*/
function display(ele) {
    const display = document.getElementById('PrintToSidebar');
    display.append(ele);
}

function setArray() {
    let textAreaElement = document.getElementById('textToArray');
    let listArray = textAreaElement.value.trim().split('\n');
    listArray.forEach(item => {
        const p = document.createElement("p");
        p.textContent = item;
        p.id = item.trim().replace(/\s/g, "-");
        display(p);
    });
}

 <textarea id="textToArray">Line 1 
Line 1
</textarea>
<div id="PrintToSidebar"> </div>
<button onclick="setArray()">Generate tag</button>