How to dynamically read all spans of a div?-JS Tutorial-php.cn

How to dynamically read all spans of a div?

王林

Release： 2023-09-02 18:37:02

forward

1234 people have browsed it

How to dynamically read all spans of a div?

When creating a web page, an HTML element can contain multiple nested HTML elements. In some cases, a developer may need to read an HTML element for a specific HTML element. In our case, we need to read all the span elements of the div element and extract their contents.

In this tutorial, we will learn to use JavaScript to read the content of all spans of a div element and append it to the web page in a formatted manner again.

grammar

Users can use JavaScript to dynamically read all ranges of div elements according to the following syntax.

var spans = div.getElementsByTagName("span");
for (var i = 0; i < spans.length; ++i) {
   output.innerHTML += spans[i].innerHTML + "<br>";
}

Copy after login

In the above syntax, we get the "span" element through the tag name and read all span elements one by one.

Example 1

In the example below, we create a div element containing the id "myDIv". Additionally, we added 5 span elements with different content.

In JavaScript, we use the id of the div element to access it. After that, we access all span elements, which are children of div elements, by their tag names. Next, we use a for loop to iterate over the array of span elements and get the inner HTML of each span element.

In the output, we can see the content of the span element.

<html>
<body>
    <h2> Reading <i> all the spans of a div element </i> dynamically using JavaScript </h2>
    <div id="myDiv">
        <span> First </span>
        <span> Second </span>
        <span> Third </span>
        <span> Fourth </span>
        <span> Fifth </span>
    </div>
    <br>
    <div id = "output"> </div>
    <script>
        var div = document.getElementById("myDiv");
        var spans = div.getElementsByTagName("span");
        var output = document.getElementById("output");
        for (var i = 0; i < spans.length; ++i) {
            output.innerHTML += spans[i].innerHTML + "<br>";
        }
    </script>
</html>

Copy after login

Example 2

In the example below, we create a div element with an id equal to "content". The div element contains multiple "

", "" and "" elements as children in random order, but we only extract the span element.

In JavaScript, we access div elements and child span elements. After that, we just read the content of the span element and append its content to the list.

<html>
<body>
    <h2> Reading <i> all the spans of a div element </i> dynamically using JavaScript </h2>
    <div id = "content">
        <p> This is the first paragraph. </p>
        <p> This is the second paragraph. </p>
        <span> This is the first span. </span>
        <div> This is a div element. </div>
        <span> This is the second span. </span>
        <span> This is the third span. </span>
        <h2> This is a h2 element </h2>
        <p> This is the third paragraph. </p>
        <span> This is the fourth span. </span>
    </div>
    <br>
    <ul id = "output"> </ul>
    <script>
        var div = document.getElementById("content");
        var spans = div.getElementsByTagName("span");
        var output = document.getElementById("output");
        for (var i = 0; i < spans.length; i++) {
            var li = document.createElement("li");
            li.innerHTML = spans[i].innerHTML;
            output.appendChild(li);
        }
    </script>
</html>

Copy after login

Example 3

In this example, we have added the name of the fruit in the span tag and its explanation in the div tag. Therefore, the parent div contains span and div elements as child elements.

In JavaScript, we use the "children" attribute to get all child elements of the div element. After that, we iterate over all child elements. In the for loop, we use the "tagName" attribute to check if the current element is a "span" element. If it is, we read its content and append it to the list. Otherwise, we continue iterating.

<html>
<body>
    <h3> Reading <i> all the spans of a div element </i> dynamically using JavaScript </h3>
    <div id = "fruits">
        <span> Apple </span>
        <div> Color: red </div>
        <span> Orange </span>
        <div> Color: orange </div>
        <span> Banana </span>
        <div> Color: yellow </div>
        <span> Watermelon </span>
        <div> Color: green </div>
    </div>
    <h3> Output: </h3>
    <ul id = "output"> </ul>
    <script>
        let fruits = document.getElementById("fruits");
        let children = fruits.children;
        let output = document.getElementById("output");
        for (let i = 0; i < children.length; i++) {
            if (children[i].tagName == "SPAN") {
                output.innerHTML += "<li>" + children[i].innerHTML + "</li>";
            }
        }
    </script>
</html>

Copy after login

in conclusion

We learned to use JavaScript to dynamically read all span elements of a div element. In the first two examples, we accessed all span elements and then iterated over them. In the third example, we iterate over all child elements of the div element and identify the span element while iterating.

The above is the detailed content of How to dynamically read all spans of a div?. For more information, please follow other related articles on the PHP Chinese website!