What is the process for adding elements to the parent elements that have been selected using getElementsByClassName?

Question

What is the process for adding elements to the parent elements that have been selected using getElementsByClassName?

Here is the JSP code snippet I'm working with:

<%
    while(resultSet1.next()){
                        out.println("<p class='comm'>");
                        out.println(resultSet1.getString("answer_content"));
                        out.println("</p>");

                    }
%>

Next, here is the script that I implemented:

<script>

            $( document ).ready(function() {

                var par = document.getElementsByClassName("comm");

                var insert = document.createElement("form");
                insert.setAttribute("action","ForumSubmitCommentController");

                var text = document.createElement("input");
                text.setAttribute("type","text");
                text.setAttribute("name","comm_text");
                text.setAttribute("id","comm_text");
                insert.appendChild(text);

                var comm_submit = document.createElement("input");
                comm_submit.setAttribute("type","submit");
                comm_submit.setAttribute("value","Comment");
                insert.appendChild(comm_submit);

                par.appendChild(insert);

           });

        </script>

Despite my expectations of having a form attached to all 'p' elements with "class='comm'," it appears that no forms are being added. Can someone please assist me in identifying where I may have gone wrong? Thank you in advance.

javascript jquery jsp

Answer 1

Answer №1

because par is an array, it does not have the appendChild method

$(document).ready(function () {
    $('.comm').each(function () {
        var insert = document.createElement("form");
        insert.setAttribute("action", "ForumSubmitCommentController");

        var text = document.createElement("input");
        text.setAttribute("type", "text");
        text.setAttribute("name", "comm_text");
        text.setAttribute("id", "comm_text");
        insert.appendChild(text);

        var comm_submit = document.createElement("input");
        comm_submit.setAttribute("type", "submit");
        comm_submit.setAttribute("value", "Comment");
        insert.appendChild(comm_submit);

        this.appendChild(insert);

    })
});

Demo: Fiddle

However, a simpler way to achieve this is by using

$(document).ready(function () {
    var form = '<form action="ForumSubmitCommentController"><input type="text" name="comm_text" id="comm_text"><input type="submit" value="Comment"></form>';

    $('.comm').append(form)
});

Demo: Fiddle

Answer 2

because par is an array, it does not have the appendChild method

$(document).ready(function () {
    $('.comm').each(function () {
        var insert = document.createElement("form");
        insert.setAttribute("action", "ForumSubmitCommentController");

        var text = document.createElement("input");
        text.setAttribute("type", "text");
        text.setAttribute("name", "comm_text");
        text.setAttribute("id", "comm_text");
        insert.appendChild(text);

        var comm_submit = document.createElement("input");
        comm_submit.setAttribute("type", "submit");
        comm_submit.setAttribute("value", "Comment");
        insert.appendChild(comm_submit);

        this.appendChild(insert);

    })
});

Demo: Fiddle

However, a simpler way to achieve this is by using

$(document).ready(function () {
    var form = '<form action="ForumSubmitCommentController"><input type="text" name="comm_text" id="comm_text"><input type="submit" value="Comment"></form>';

    $('.comm').append(form)
});

Demo: Fiddle

Answer 3

Answer №2

Performing DOM manipulations like this is typically straightforward when using a library such as jQuery, but it can become difficult or verbose when working with the plain old DOM API.

For instance, document.getElementsByClassName retrieves an HTMLCollection, which is an array-like collection of elements. To apply changes to all of these elements, you must iterate through them and apply the necessary modifications.

Here's an example:

nodesList = document.getElementsByClassName("helloworld");
for(var i = 0; i < nodeList.length; i++) {
    var node = nodeList[i];
    // create form etc...
    node.appendChild(form);
}

It's worth noting that the HTMLCollection does not have a forEach method, so you need to either use a standard for-loop or convert it into an array first (such as by utilizing methods like this one). Additionally, before each call to appendChild, you must create a new form node (or utilize cloneNode) because each DOM node is unique and appendChild simply relocates it within the DOM structure.

Libraries like jQuery handle these details under the hood, abstracting away complexities and enhancing code readability. While understanding the DOM API is valuable, in practical projects, relying on jQuery for all manipulation tasks is often more efficient and manageable. Focus on mastering jQuery and leverage its capabilities for your development needs.

Answer 4

Performing DOM manipulations like this is typically straightforward when using a library such as jQuery, but it can become difficult or verbose when working with the plain old DOM API.

For instance, document.getElementsByClassName retrieves an HTMLCollection, which is an array-like collection of elements. To apply changes to all of these elements, you must iterate through them and apply the necessary modifications.

Here's an example:

nodesList = document.getElementsByClassName("helloworld");
for(var i = 0; i < nodeList.length; i++) {
    var node = nodeList[i];
    // create form etc...
    node.appendChild(form);
}

It's worth noting that the HTMLCollection does not have a forEach method, so you need to either use a standard for-loop or convert it into an array first (such as by utilizing methods like this one). Additionally, before each call to appendChild, you must create a new form node (or utilize cloneNode) because each DOM node is unique and appendChild simply relocates it within the DOM structure.

Libraries like jQuery handle these details under the hood, abstracting away complexities and enhancing code readability. While understanding the DOM API is valuable, in practical projects, relying on jQuery for all manipulation tasks is often more efficient and manageable. Focus on mastering jQuery and leverage its capabilities for your development needs.

What is the process for adding elements to the parent elements that have been selected using getElementsByClassName?

Answer №1

Answer №2

Similar questions

Using Symfony2 to make an Ajax request in order to show a message based on a particular condition

Extension for Chrome that enhances YouTube video playback experience

Using Axios and Typescript to filter an array object and return only the specified properties

What could be the reason behind the disruption in this JavaScript associative array?

Updating the values of parent components in Vue.js 3 has been discovered to not function properly with composite API

Wordpress causing Jquery to malfunction; PHP function not executing

Ways to slow down page transition on NextJs

I have been experiencing issues with browserify when trying to use both jquery and jquery-ui

SVGs do not display on iPhones

Is it possible to slide-toggle and alter the background color of a div when clicked?

Displaying random divs and subsequently animating them downwards using JavaScript

Passing an event from onSubmit in React without using lambdas

Is there a way to arrange an HTML list in this specific manner using CSS or JavaScript?

In the XHTML mode, MathOverflow's invaluable mathematical expertise shines brightly

Show a div depending on user input

What is the best way to determine which watchers are triggered in Vue.js?

Having trouble retrieving the value of the second dropdown in a servlet through request.getParameter

Mastering MongoDB update functions in JavaScript

AJAX form in a partial view displaying a summary of validations

I am experiencing difficulties in accessing the DOM