Display input from text area as HTML and assign IDs to the HTML elements

Question

I'm using a function to add strings to an array from a textArea in a modal, then printing them to the DOM with innerHTML (which I learned here). The function is called with a button on the 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";
    }

That seems to be working well, but I also want to set an ID for each individual <p>, with the IDs being equal to the string values.

For example, if listArray = ["Line 1", "Line 2"], then my desired innerHTML would result in:

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

My searches seem to indicate I need to use the setAttribute method. But I'm also thinking I need to loop through listArray first.

I'm only a few days into Javascript (totally new to coding actually) so a detailed solution would be really helpful. Thank you!

Ideally don't use innerHTML and instead create the `p` tags with `document.createElement` so you can set their `id` attributes. — elclanrs, Jan 06 '20 at 01:08
It's worth noting that the suggested `id`'s of `line 1` and `line 2` are [technically invalid](https://stackoverflow.com/a/7873035/11700321) as an `id` cannot have a space in it. This can be easily mitigated though with the [Javascript Replace](https://www.w3schools.com/jsref/jsref_replace.asp) function to remove the whitespace. — EGC, Jan 06 '20 at 01:24

Sohail Ashraf · Accepted Answer · 2020-01-06T02:11:19.970

You can loop over the array and create the p element dynamically with the help of document.createElement("p) which is the built in function, then set the text on textContent property and the id on id property of the newly created element.

I used trim() to remove the spaces from start and at the end of the string and replace to replace the spaces with -. replace first argument is a Regular Expressions which you can learn more on this 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>

I'm having some trouble getting this to work. I'm getting an error: "Uncaught TypeError: Cannot read property 'append' of null," but I'll keep playing around with it. Thank you! — Taylor, Jan 06 '20 at 02:10
Because the 'display' div is not defined in your code. I have changed the code to append the element to `PrintToSidebar` element. Please try now and let me know if you are still facing issue. Thank you. — Sohail Ashraf, Jan 06 '20 at 02:12

Display input from text area as HTML and assign IDs to the HTML elements

1 Answers1