Inserting HTML content dynamically using JavaScript

I successfully created a JavaScript function to add an input file tag and a link, but now I would like to include a radio button along with some text next to it. I have been able to add the radio button without any issues, but I'm unsure how to insert the accompanying text.

Here is the existing code...

addCampo = function () {  
    nDiv = document.createElement('div');
    nDiv.className = 'archivo';
    nDiv.id = 'file' + (++numero);


    nCampo = document.createElement('input');
    nCampo.name = 'archivos[]';
    nCampo.type = 'file';

    a = document.createElement('a');
    a.name = nDiv.id;
    a.href = '#';
    a.onclick = elimCamp;
    a.innerHTML = ' Eliminar';

    portada = document.createElement('input');
    portada.name = 'portada';
    portada.type = 'radio';
    portada.value = '1';

    nDiv.appendChild(nCampo);
    nDiv.appendChild(portada);

    // HERE I WANT A SIMPLE TEXT SAYING WHAT DOES THE RADIO BUTTON INDICATE

    nDiv.appendChild(a);

    container = document.getElementById('adjuntos');
    container.appendChild(nDiv);
}

The code works perfectly fine as it is! The only dilemma I face is regarding including plain text without tags...

Answer №1

To achieve the desired outcome, you can implement the following code:

text = document.createTextNode('what the radio does');
nDiv.appendChild(text);

Alternatively, it is recommended to utilize a label instead of directly manipulating the radio button. In this scenario, the code needed would be:

portada.id = 'portada';
text = document.createElement('label');
text.innerText = 'what the radio does';
text.for = 'portada';
nDiv.appendChild(text);

Note: It's worth mentioning that innerText may not be universally supported by all browsers. In such cases, consider using innerHTML as an alternative, or opt for textContent if compatibility with older versions of Internet Explorer is not a concern. Alternatively, create a text node and append it to the label node as a workaround.

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

How can I delete the Location Box from Google Maps that appears in the top left corner?

My goal is to display all warehouse locations from Google Maps on my website by utilizing Google Map's iframe: <iframe src="http://maps.google.com/maps?q=118+Lamington+Rd.+–+Bateman+Student+Center,+Branchburg,+NJ+08876&amp;output=embed" fram ...

Exploring the resolution of unit test for an Angular Bootstrap modal using the John Papa ViewModel style

A custom ModalService has been created to display two different types of dialogs, CancelDialog and ErrorDialog, based on the parameter passed to the service. For example, the following code will show an ErrorDialog: ModalService.openModal('Analysis ...

Javascript/AJAX functions properly on the homepage, but encounters issues on other pages

For a client, I have recently created 4 websites using Wordpress. Each site includes a sidebar with a script that utilizes the Google Maps API to estimate taxi fares. Strangely, the script works perfectly on the home page of each site, but fails to funct ...

Hide the .prev button on the jQuery slider when it is on the first

Is there a way to hide the .prev button when it is the first one? Also, why does the slider go back to the first slide when the .prev button is clicked at the last slide? How can this issue be resolved? var nextPane = function (e) { e &&am ...

Splitting a string in Angular.JS using ng-repeat

Just diving into the world of Angular.JS and grappling with the concept of implementing ng-repeat. Within my scope, I have a data object derived from JSON fetched from my database. Among the returned 'fields', one particular field can either be ...

Ways to resolve the problem of connecting Provider with my store and efficiently transmitting data to components in my Redux-React application

Encountering an error that reads: Uncaught Error: Could not find "store" in either the context or props of "Connect(WebShop)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(WebShop)". Despite havin ...

Vue Material - Effortlessly integrate native transitions within router views

In the project I'm currently working on, I have chosen to use Vue Material for the development of a single-page application. The approach I am taking follows a common trend in which a central "container" component is utilized to manage the shifting vi ...

jQuery DataTables covering a CSS-anchored menu bar

My webpage has a pinned navigation menu bar at the top and some tables with interactive features using jQuery's DataTables. However, after implementing jQuery, I encountered an issue where the tables cover the menu when scrolling down, making it uncli ...

Adding a div with a canvas element is malfunctioning

I've been experimenting with using canvg to convert an SVG within a div into a canvas. So far, the conversion is working fine but when I try to copy the innerHTML of the div to another div, it's not functioning properly. The canvas is being gener ...

Cleaning up HTML5 video content

I have been on the search for a solution that would allow me to "scrub" through HTML5 video. So far, I have not come across one and was considering developing my own. However, before diving into that process, I wanted to seek advice from the community here ...

Encountered an error while trying to download a PDF document in React

I'm currently working on adding a button to my website portfolio that allows users to download my CV when clicked. The functionality works perfectly fine on my localhost, but after deploying it to AWS Amplify, I encountered an error. The error occurs ...

Access to the Heroku app is restricted to the specific device that I have designated for its

I am having some issues with deploying my app and need some help. Here are the details: Using the free plan on Heroku On other devices, only the background image/color/pattern is visible Errors on other devices (mainly related to Redux): On Firefox ...

jQuery Validation for Radio Buttons and Optional Fields

I've been pondering over this issue for a couple of hours now. Currently, my focus is on validating a form using a jQuery plugin. Here's the link to the documentation: http://docs.jquery.com/Plugins/Validation Here's the code I have so fa ...

An error has been encountered in Angular where a source map issue is causing a TypeError due to the

Whenever I work on an Angular project, the browser console usually remains error-free. However, when I opt to include projects > project-name > architect > build > options > "optimization": false in the angular.json file to deactiv ...

Exploring the realms of software testing with a blend of manual testing and automation using powerful tools such as

Although I am still relatively new to automation, I have already created a handful of tests using Webdriver and TestNG. These tests are data-driven, pulling parameters from Excel sheets. As someone who primarily works manually on test plans, teaching mysel ...

Tips for refreshing an angularjs $scope using $.get jquery

Attempting to implement the code below using $scope: var scopes = "https://www.googleapis.com/auth/contacts.readonly"; setTimeout(authorize(), 20); function authorize() { gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, h ...

Is there a way for me to remove an uploaded image from the system

Here is an example of my HTML code: <input type='file' multiple/> <?php for($i=0;$i<5; $i++) { ?> <div class="img-container" id="box<?php echo $i ?>"> <button style="display: none;" type="submit" cl ...

What is the best way to record and share a video with jquery and laravel?

Is there a way to grant users access to record videos within an application and then upload them after previewing? I've been able to successfully record and download a video, but now I'm unsure of how to proceed with uploading it to the server. ...

Adjust the image to stretch and crop appropriately to perfectly fit the specified dimensions

I have a div with an image inside of it, and the overflow of the div is set to hidden so that the image will be cropped if it exceeds the width or height. It was working correctly, but sometimes it doesn't. What could be causing this issue? Here is th ...

Adjusting the width of elements using percentage values in CSS and altering the layout with Bootstrap

I am facing a peculiar issue. I have added a d-flex justify-content-between container to my div container with text on one side and images on the other. However, when I try changing the width using % (for example, width:5%), the flex behavior becomes str ...