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

Question

我正在使用一个函数将文本区中的字符串添加到一个数组中，然后使用innerHTML将它们打印到DOM中（我在这里学到的）。该函数是通过modal上的一个按钮调用的。

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（实际上是完全新手），详细的解决方案会非常有帮助。谢谢！

- Taylor

---

理想情况下不要使用innerHTML，而是使用document.createElement创建p标签，这样您就可以设置它们的id属性。 - elclanrs

值得注意的是，建议使用的“line 1”和“line 2”的id实际上是无效的（https://dev59.com/vWw15IYBdhLWcg3wIoVM#7873035），因为`id`中不能有空格。不过，可以通过[Javascript Replace](https://www.w3schools.com/jsref/jsref_replace.asp)函数轻松消除空格。 - EGC

Answer 1

您可以循环数组并使用内置函数document.createElement("p)动态创建p元素，然后在新创建的元素上设置文本内容textContent和id属性id。为了删除字符串开头和结尾的空格以及将空格替换为-，我使用了trim()和replace。replace第一个参数是正则表达式，您可以在此链接中了解更多： Link。

Last step is to append the newly created element to the dom. t

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

- Sohail Ashraf

---

我在使用时遇到了一些问题。我收到了一个错误：“Uncaught TypeError: Cannot read property 'append' of null”，但我会继续尝试解决它。谢谢！ - Taylor

因为你的代码中没有定义'display' div。我已经更改了代码，将元素附加到“PrintToSidebar”元素。请现在尝试并告诉我是否仍然存在问题。谢谢。 - Sohail Ashraf

完美！谢谢！ - Taylor