How can I avoid using the appendTo method in jQuery?

Question

How can I avoid using the appendTo method in jQuery?

There seems to be an issue in my HTML code, could you please take a look at the code snippet below:

HTML:

<div class="agent_select_wrap">
    <select name="menu-114" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
        <option value="Select Category" selected="selected">Select Agent Name</option>
        <option>Mr. abc</option>
        <option>Mr. abc</option>
        <option>Mr. abc</option>
    </select>
</div>
<div class="agent_select_wrap02">
    <div class="my_textarea"></div>
    <button>Send</button>
</div>

CSS

.agent_select_wrap {  width: 40%; margin: 30px auto 10px auto;}
.agent_select_wrap02 {  width: 40%; margin: 0px auto 50px auto;}
.agent_select_wrap select{font-weight:100; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #494949; background: #fff url('../images/selectbox-arrow02.png') right center no-repeat; outline: 0; margin-bottom: 0px; margin: auto; width: 100%; height: 40px; border: 1px solid #ccc; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-appearance: none;  /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);*/}
.agent_select_wrap select option { background: #fff; color: #000;}
.my_textarea textarea {font-weight:100; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #494949; width:97.4%; display:block;   height: 100px; border: 1px solid #ccc; padding: 6px 0 0 6px; margin: 0; border-radius: 0px;  /*box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);*/}
.my_textarea p{padding: 0; margin: 0; text-align: center; font-size: 12px;font-family: 'Open Sans', sans-serif;}
.agent_select_wrap02 button {  display: block; margin: 16px auto 0 auto; padding: 7px 30px; background: #494949; color: #fff; font-weight: 100; font-family: 'Open Sans', sans-serif; font-size: 18px; border: 0;}
.agent_select_wrap02 button:hover {cursor:pointer;}

JS

$(document).on('change', 'select[name=menu-114]', function () {
    $("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
    $("<p>Please enter your message here..!</p>").appendTo(".my_textarea")

    $(function () {
        $('select').change(function () {
            $that = $(this);
            $('textarea').val(function () {
                return $(this).prop('defaultValue') + ' ' + $that.val();
            });
        });
    });
});

Check out the live example here: https://jsfiddle.net/7j623eho/

javascript html css

Answer 1

Answer №1

Make a simple tweak to just one line in your JavaScript code.

$(".my_textarea").html("<textarea> Hello there! </textarea><p>Feel free to type your message here..!</p>");

Replace your current code with the one provided above.

$("<textarea> Hello there! </textarea>").appendTo(".my_textarea")
$("<p>Feel free to type your message here..!</p>").appendTo(".my_textarea")

Answer 2

Make a simple tweak to just one line in your JavaScript code.

$(".my_textarea").html("<textarea> Hello there! </textarea><p>Feel free to type your message here..!</p>");

Replace your current code with the one provided above.

$("<textarea> Hello there! </textarea>").appendTo(".my_textarea")
$("<p>Feel free to type your message here..!</p>").appendTo(".my_textarea")

Answer 3

Answer №2

It seems like the issue may be that you are not properly removing the newly created textarea. One solution could be to create the textarea inside a <div id='temp'> element and then remove this element before creating a new one.

$('#temp').remove();

var container = $('<div id="temp">');
$("<textarea> Hello there! </textarea>").appendTo(container);
$("<p>Feel free to write your message here..!</p>").appendTo(container);
container.appendTo(".my_textarea");

Answer 4

It seems like the issue may be that you are not properly removing the newly created textarea. One solution could be to create the textarea inside a <div id='temp'> element and then remove this element before creating a new one.

$('#temp').remove();

var container = $('<div id="temp">');
$("<textarea> Hello there! </textarea>").appendTo(container);
$("<p>Feel free to write your message here..!</p>").appendTo(container);
container.appendTo(".my_textarea");

Answer 5

Answer №3

If you are looking to create the textarea just once and have the inline handler manage any further changes, one way to accomplish this is:

var onMenuSelected = function () {
    $("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
    $("<p>Please enter your message here..!</p>").appendTo(".my_textarea")

    $(function () {
        $('select').change(function () {
            $that = $(this);
            console.log('Select');
            $('textarea').val(function () {
                return $(this).prop('defaultValue') + ' ' + $that.val();
            });
        });
    });

    // Just unbind self
    $(document).off('change', 'select[name=menu-114]', onMenuSelected);
}
$(document).on('change', 'select[name=menu-114]', onMenuSelected);

By defining the function, you can easily remove the $(document).on without affecting other handlers that may exist. This ensures that the select event is only registered once.

Check out the jsFiddle link here.

Answer 6

If you are looking to create the textarea just once and have the inline handler manage any further changes, one way to accomplish this is:

var onMenuSelected = function () {
    $("<textarea> Hello Mr. </textarea>").appendTo(".my_textarea")
    $("<p>Please enter your message here..!</p>").appendTo(".my_textarea")

    $(function () {
        $('select').change(function () {
            $that = $(this);
            console.log('Select');
            $('textarea').val(function () {
                return $(this).prop('defaultValue') + ' ' + $that.val();
            });
        });
    });

    // Just unbind self
    $(document).off('change', 'select[name=menu-114]', onMenuSelected);
}
$(document).on('change', 'select[name=menu-114]', onMenuSelected);

By defining the function, you can easily remove the $(document).on without affecting other handlers that may exist. This ensures that the select event is only registered once.

Check out the jsFiddle link here.

Answer 7

Answer №4

Let's get started, here is the code snippet to use:

HTML

<div class="agent_select_wrap">
                     <select name="menu-114" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
                        <option value="Select Category" selected="selected">Select Agent Name</option>
                                <option>Mr. abc</option>
                                <option>Mr. abc</option>
                                <option>Mr. abc</option>
                     </select>                    
                </div>




                <div class="agent_select_wrap02">

                    <div id="my_textarea0">

                    </div>
                    <textarea id="my_textarea">

                    </textarea>
                    <button>Send</button>
                </div>

JS

$(document).on('change', 'select[name=menu-114]', function () {
    $("#my_textarea0").html("<textarea> Hello Mr. </textarea>")
    $("#my_textarea").html("<p>Please enter your message here..!</p>")

    $(function () {
        $('select').change(function () {
            $that = $(this);
            $('textarea').val(function () {
                return $(this).prop('defaultValue') + ' ' + $that.val();
            });
        });
    });
});

Answer 8

Let's get started, here is the code snippet to use:

HTML

<div class="agent_select_wrap">
                     <select name="menu-114" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
                        <option value="Select Category" selected="selected">Select Agent Name</option>
                                <option>Mr. abc</option>
                                <option>Mr. abc</option>
                                <option>Mr. abc</option>
                     </select>                    
                </div>




                <div class="agent_select_wrap02">

                    <div id="my_textarea0">

                    </div>
                    <textarea id="my_textarea">

                    </textarea>
                    <button>Send</button>
                </div>

JS

$(document).on('change', 'select[name=menu-114]', function () {
    $("#my_textarea0").html("<textarea> Hello Mr. </textarea>")
    $("#my_textarea").html("<p>Please enter your message here..!</p>")

    $(function () {
        $('select').change(function () {
            $that = $(this);
            $('textarea').val(function () {
                return $(this).prop('defaultValue') + ' ' + $that.val();
            });
        });
    });
});

How can I avoid using the appendTo method in jQuery?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The website shifts as you navigate to a new page

send a variable to a function in a random sequence

The custom switch input with a blue outline is reluctant to vanish

Tips for organizing dynamic table data following an append operation

extract all elements from an array nested within another array

Troubleshooting: Ngx-Echarts Animation Issue at Startup

Having trouble inserting a Button element into a li parent element

I'm having trouble getting the app.locals function within a button to work on my EJS template. Can anyone help troub

The Bootstrap carousel feature allows you to track the duration each image is displayed

Why do HTML elements in an email have strange prefixes added to their IDs?

Tips for updating the display by fetching data from a database through a websocket

What is the best way to show only a specific v-for element in Vue.js?

Displaying a notification for a multi-selection using JavaScript

Retrieving JQuery Results Based on List Items

How do I easily show/hide a submenu in AngularJS with a toggle menu?

Challenges arising from the rendering of main.js in Vue.js

Exploring the file attributes within nw.js

Preserving the "height" declaration in jQuery post-Ajax request (adjusting height after dropdown selection loads product information, resetting heights of other page elements)

What can you do with jQuery and an array or JSON data

Refresh the DIV element that houses dynamically generated <ul> HTML content after submitting new inputs