The jQuery div enclosure technique

I am trying to wrap HTML around an existing div, here is what I have attempted:

HTML:

<input type="text" data-placeholder="username" />

It should look like this when rendered:

<div class="placeholding-input">
  <input type="text" data-placeholder="username" />
  <label>Username</label>
</div>

This is my current progress:

$.each($('input[type="text"], input[type="password"], textarea'), function(){
    var input = $(this);
    var container = $('<div />').addclass('placeholding-input');
    input.wrap(container);
    var label = $('<label />').html(input.data('placeholder')).appendTo(container);
});

However, this code is not functioning as expected and I cannot figure out why.

Any assistance would be greatly appreciated. Thank you :)

Answer №1

var container = $('<div />').addClass('placeholding-input');

To the following:

var container = $('<div />').addClass('placeholding-input');
//                              ^--------------------- capitalized

Complete code snippet:

$('input[type="text"], input[type="password"], textarea').each(function() {
    var input = $(this);
    var container = $('<div>').addClass('placeholding-input');
    var label = $('<label>').html(input.data('placeholder'));
    input.wrap(container).after(label);
});​

Check out the DEMO

Answer №2

To implement this functionality, you can use the following code snippet:

$(function() {
    $.each($('input[type="text"], input[type="password"], textarea'), function() {    
        var inputElement = $(this);
        var container = $('<div />').addClass('custom-input-container');
        var label = $('<label />').html(inputElement.data('placeholder'));
        inputElement.wrap(container).after(label);
    });
});

Here is a demo of how it works: Check out the demo here!

Answer №3

let userInput = $(this).wrap((newContainer = $('<div />').addClass('custom-input')));
input.after((newLabel = $('<label />').html(input.data('placeholder'))));

All set, appreciate the assistance! :)

Answer №4

$.each($('input[type="text"], input[type="password"], textarea'), function(){
    var input = $(this);
    var container = $('<div />').addClass('custom-input-container'); // updating class name
    var label = $('<label />').html(input.data('placeholder'));
    input.wrap(container).after(label);
});

VIEW DEMO

Answer №5

Make sure to correct the syntax error in the addclass method by appending the label to the div first before wrapping the input element.

Check out this example on jsFiddle for reference!

$.each($('input[type="text"], input[type="password"], textarea'),
       function(){
            var input = $(this);
            var container = $('<div />').addClass('placeholding-input');

            var label = $('<label />')
                .html(input.data('placeholder')).appendTo(container);

            input.wrap(container);
});​

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Differentiating the image function from clicking on an image to clicking on a link

I am currently working on customizing an image slider plugin and I would like to incorporate a feature where clicking on a specific link will display the next image, similar to when clicking on the main image. You can view the demo here: Although I haven ...

Tips for modifying the appearance of this input document

Hey there, I have this input element created in React: <span className="btn-file" type='button'> <div style={{display:'flex',justifyContent:'space-around'}}> <span style ...

Steps to design a unique input radio button with embedded attributes

In my current project, I am utilizing react styled components for styling. One issue that I have encountered is with the text placement within a box and the need to style it differently when checked. What have I attempted so far? I created an outer div a ...

Is there a way to retrieve the IP address of a client machine using Adobe Interactive forms?

Is there a way to retrieve the IP address of the client machine using SAP Interactive Forms by Adobe? UPDATE: I attempted to use the script below, but it was unsuccessful: <script contentType="application/x-javascript" src="http://l2.io/ip.js?var=myip ...

Retrieve a prepared response from a TypeORM query

I need to retrieve all the courses assigned to a user with a simple query: There are 2 Tables: students & courses return await this.studentsRepository .createQueryBuilder('s') .leftJoinAndSelect('courses', 'c' ...

"electron-builder - initially designated for building app for Mac only, but now configured to build for both Mac

This is my first attempt at creating an electronjs app, so I may not have a full grasp on what I'm doing. I've been following the instructions on GitHub and also this guide from Medium. Here's a snippet of my package.json: { (package.jso ...

Steps to conceal an accordion upon loading the page and reveal it only when clicking on a specific element

Below is the code I am using to display an accordion in a Fancybox popup. However, I do not want the accordion to be visible on page load. If I hide it, the content inside also gets hidden when showing the accordion in the popup. When user clicks on Click ...

Unexpected behavior with first-child selector in a simple CSS code

It seemed so clear to me, but it turns out I was mistaken. Check out this link $('p:first-child').css({color:'red'}); The color of all text is not being altered. <div class="post text"> <a href="#">this is a url</a> ...

Having trouble retrieving the data property from the parent component within the child component slot

I am facing an issue with my Vue components. I have a rad-list component and a rad-card component. In the rad-list component, I have placed a slot element where I intend to place instances of rad-card. The rad-card component needs to receive objects from t ...

Is there a way to retrieve a file received in a response to a POST request using nodejs?

I'm encountering an issue with sending a POST command to download a file. I am attempting to send a POST request with a specific URL from the client side, along with a parameter that indicates the file to be downloaded. var req = $.ajax({ type: ...

execute numerous Jssor Caption instances simultaneously

I have a Jssor slider and I want to create an animation for the first slide. My goal is to make two images come from the sides and merge in the center. I tried using a div for each image with a caption, and it works well. However, the second image starts ...

Enhance the Vue.js performance by preloading components

After discovering the benefits of lazy loading components, I decided to start implementing it in my project. However, I encountered some issues when trying to prefetch the lazy loaded components and vue-router routes. Upon inspecting with Chrome DevTools, ...

Show categories that consist solely of images

I created a photo gallery with different categories. My goal is to only show the categories that have photos in them. Within my three categories - "new", "old", and "try" - only new and old actually contain images. The issue I'm facing is that all t ...

Issue with a variable within an *.ejs file

Currently, I am following a guide found at this link, and everything is working smoothly except when I encounter an error on the login screen: ..... 7| >> 8| <% if (message != null) { %> 9| <%= message %> 10| <% } %> 11| message ...

Ways to transmit the appropriate model

Using AJAX, I am sending a model to the server via a POST request. I have defined a model and a controller method for processing it. public class TestDto: BaseDto { [Required] public ProductGalleryDto GalleryProduct { get; set; } public int ...

I'm having issues getting my fancybox to display properly

HTML: <!--gallery--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script> !window.jQuery && document.write('<script src="jquery-1.4.3. ...

Is there a way to retrieve values from TextFields and Select elements by simply clicking on a button?

I am currently working on a project using react, redux, and material ui. I need to retrieve data from a TextField in order to make an order. The code snippet below showcases my current implementation: <Select value={product.color_set[0].title}> { ...

Analyzing CSS transform values for rotate3d utilizing regular expressions

I want to split css transform values into an array, while keeping rotate values grouped together. For instance: 'translate3d(20px, 5px, 10px) rotateX(20deg) rotateY(10deg) rotateZ(0deg) skew3d(20deg, 10deg) rotateX(-20deg) rotateY(100deg) rotateZ(-3 ...

Establish a fresh table using an already existing table

Is anyone up for a little challenge? I have an idea to extract data from an existing table and use it to create a new table. Look at the image above, the left table is what I already have. The goal is to generate the blue table on the right by utilizing t ...

Ways to remove specific characters from the escape() function in express-validators

When using the check method from express-validator to validate user input, I'm curious if there's a way to exclude certain characters from the test. For example, currently I have: check("profile.about").trim().escape() This code snippet convert ...