Check for certain words in all paragraphs and add to list

Question

I'm trying to check paragraphs to see if it contains a certain word (Apple), and if so, add that to a list.

<p>Orange</p>
<p>Grape</p>
<p>Apple</p>

<ul id=ulist>
</ul>

<script>
  var i;
  var x = document.getElementsByTagName("P");
  for (i = 0; i < x.length; i++) {
    document.getElementById("ulist").innerHTML = "<li>" + x[i].innerHTML + "<li>";
  }
</script>

I'm unsure how to check for words, but first I'm trying to go through each paragraph and add each word to the list, but it's only adding Apple. I don't understand why even though I set i=0.

Expected output:

- Apple

New to Javascript so I'd appreciate if the solution uses simple code even if it's long.

You have a typo. `id=ulist` need quotes around the name. `
`. Note that questions on this site will be closed if the problem was because of a typo — Rojo, Mar 23 '21 at 12:32
@Rojo quotes are not needed https://html.spec.whatwg.org/multipage/syntax.html#unquoted — evolutionxbox, Mar 23 '21 at 12:34
Note that you have an **unsafe** assignment to `innerHTML`. See [this question](https://stackoverflow.com/questions/45579400/best-way-to-purge-innerhtml-from-a-firefox-extension) for an alternative. — Rojo, Mar 23 '21 at 12:34
@Rojo I still can't get over this. I started Front-end when XHTML was the new hotness — evolutionxbox, Mar 23 '21 at 12:37

Endothermic_Dragon · Answer 1 · 2021-03-23T12:58:39.877

Try this code:

var paragraphs = [...document.getElementsByTagName("P")];
var list = document.getElementById("ulist")

paragraphs.forEach(el => {
  if (el.innerText.toLowerCase().includes("apple")) {
    var li = document.createElement("LI")
    li.innerText = el.innerText
    list.appendChild(li)
  }
})

<p>Orange</p>
<p>Grape</p>
<p>Apple</p>
<p>Not Apple</p>

<ul id="ulist"></ul>

It checks if each <p> has the word apple in it, and if so, it dynamically adds it to the list.

If you want to check if it's Apple just by itself, use ==, and if you want to make the search case-sensitive, remove the .toLowerCase() and change the word apple to Apple.

If you want to add every element, simply remove the if condition.

Mamun · Accepted Answer · 2021-03-23T12:47:20.033

0

You should use += instead of =. Also forgot to close the list element (should be </li>). Also, for better performance you can first generate string for all the items the update the DOM only once.

You can check the text of the current element in each iteration based on which you can create items.

Demo:

<p>Orange</p>
<p>Grape</p>
<p>Apple</p>

<ul id=ulist>
</ul>

<script>
  var i;
  var x = document.getElementsByTagName("p");
  var elString = "";
  for (i = 0; i < x.length; i++) {
    if(x[i].textContent.toLowerCase().includes('apple')){ // check if text contains the word
      elString += "<li>"+x[i].textContent+"</li>";
    }
  }
  document.getElementById("ulist").innerHTML = elString;
</script>

edited Mar 23 '21 at 12:47

answered Mar 23 '21 at 12:33

Mamun

66,969
9
47
59

`` is optional – SK-the-Learner Mar 23 '21 at 12:37
@WebDevLearner, I tried that but getting extra empty items added in the DOM!!! – Mamun Mar 23 '21 at 12:38
https://stackoverflow.com/questions/20550788/does-the-li-tag-in-html-have-an-ending-tag#:~:text=The%20li%20element%20has%20an,content%20in%20the%20parent%20element.&text=It%20is%20not%20good%20coding%20practice%20to%20leave%20out%20the%20end%20tags. – SK-the-Learner Mar 23 '21 at 12:40
@WebDevLearner, it would be great if you post your answer implementing that:) – Mamun Mar 23 '21 at 12:45
I am not a *pro* at JS to be able to provide a complete solution. – SK-the-Learner Mar 23 '21 at 12:48

score 0 · Answer 3 · answered Mar 23 '21 at 13:05

Using Document.querySelectorAll(), NodeList.prototype.forEach(),Document.getElementById(), ,Document.createElement() and RegExp.prototype.test().

const fruits = document.querySelectorAll("p"),
  lists = document.getElementById("ulist");

fruits.forEach((fruit) => {
  if (/apple/i.test(fruit.textContent)) {
    const list = document.createElement("li");
    list.textContent = fruit.textContent;
    lists.append(list);
  }
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Fruits</title>
  </head>
  <body>
    <p>Orange</p>
    <p>Grape</p>
    <p>Apple</p>
    <ul id="ulist"></ul>
  </body>
</html>

Check for certain words in all paragraphs and add to list

3 Answers3