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

Question

我正在使用一个函数将字符串从模式中的文本区域添加到数组，然后使用 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";
    }

这似乎运作良好，但我还想为每个人设置一个 ID <p> , 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>