JSFiddle - React, Tailwind, and code Playground

by Hawk Hawk

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <h2>Iterave over Children of HTML Element using JavaScript</h2>
    <div id="myElement">
        <p>Hello <span>World</span>!</p>
        <ul>
          <li>List Item</li>
         </ul>
        <div>
          Sample World
          <div>
            Nested Div
               <div>
                 Another Nested Div with World
               </div>
          </div>
        </div>
    </div>
    <br>
    <button type="button" onclick="execute()">Click Me</button>
    <p id="out"></p>
    <script>
    function execute(){
        var element = document.getElementById("myElement");
        var children = element.children;
        for(var i=0; i<children.length; i++){
            var child = children[i];
            console.log(child)
            if (child.innerHTML.includes("World"))
            	child.style.color = "red";
        }
    }
    </script>
</body>
</html>