Different ways to modify the color and thickness of a variable in HTML5 with either JavaScript or CSS

I am currently working with a JavaScript file where I have a variable defined as follows:

var nombre = document.getElementById('nombre').value;

The 'nombre' variable corresponds to an element in an HTML file:

Nombre: <input type="text" name="name_control" id="nombre" autofocus required />

After adding this variable to a list, I would like to customize the text by changing its color or size when it is inserted into the list. Is this achievable? Any suggestions would be appreciated.

Edit: I have attempted the following approach. However, when adding 'nombre' to the list, it appears as simple, dark, and small text. I actually want 'nombre' to be added in red color and larger font size.

var node = document.createElement("LI"); 
var textnode = document.createTextNode(nombre+" ");
node.appendChild(textnode);  

Answer №1

try using a span element instead

    var newSpan = document.createElement('span');
     newSpan.innerHTML = name + " ";
    //customize the appearance before adding to the document
    newSpan.style.color = "blue";
    newSpan.style.fontWeight = "normal";
    newSpan.style.fontSize = "medium";

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

Leverage regular expressions to extract numbers preceding the final matched instance

Within my string of logs, I have the following: rgb(255, 255, 255) 0px 0px 0px 16px inset I am interested in extracting the dynamic value, which in this case is 16. How can I create a regex pattern that will capture the last instance of px, and then retr ...

Deactivate the submission button when there are no search results in typeahead.js

How can I disable the submit button if there are no search results found? The form should not be submitted in this scenario. I am currently using typeahead.js for my code. $('.typeahead').typeahead(null, { name: 'suburb', disp ...

The session in Express.js is not retained across different domains

I am currently developing a third-party application that will be utilized across multiple domains. My main goal is to manage a session per user who uses the app, which led me to implement the express-session module for this purpose. However, I encountered ...

Show images dynamically with the help of Flask

Imagine having a camera that can capture real-time images and save them to a folder named "./static". The goal is to showcase each processed image on a local web page using Flask in Python. This means that the system user will be able to view the results ...

inputting a pair of parameters into a function

While creating an action for react-redux, I encountered a problem when trying to pass two variables into the function - dispatch and hosts. Strangely, the variable host is being logged as a function instead of its actual value. This is my code: export fu ...

Execute javascript whenever the page is being loaded

Within my web application, I've implemented a modal popup with a loading bar to appear during any lengthy commands such as button clicks. While this feature is functioning well, there's an issue with the performance of the in-house web server it& ...

Angular not displaying retrieved data

Having an issue with fetching data from an API using Angular. Although the console log confirms that the data is successfully fetched, it doesn't display on the page. Any assistance would be greatly appreciated. Take a look at my code: app.component. ...

How can I create a responsive design for my div elements?

I am facing an issue with responsiveness in my div container. Inside the square-shaped frame, I have a h2 tag that does not adjust properly when viewed on different devices such as mobile and browsers. Despite setting up media queries to make it responsive ...

Fluid Centered UL with Bullet Points

We have received a unique request from one of our clients. They are asking for the content within a specific <ul> to be centered along with the icons. Centering and adding icons are doable, but the challenge lies in centering the <li> elements ...

What is the best method for swapping out an iframe with a div using Javascript?

Having an issue with loading an external HTML page into an iFrame on my website. Currently facing two main problems: The height of the iFrame is fixed, but I need it to adjust based on the content's height. The content inside the iFrame does not inh ...

Learn how to verify changing form inputs with Vue watchers. The challenge of numbers

Currently, I am working on a sum application and encountering some challenges with input validations. I have implemented Watcher to handle the validations, and I am exploring the possibility of adding sound and color feedback for accurate validation. Repo ...

Removing Borders from Dropdown Tabs in Bootstrap Navbar: A Step-by-Step Guide

I am facing an issue while using Bootstrap 4, as I am unable to remove the border that appears when selecting the drop-down tab. Here is a glimpse of the problem You can view the Inspector View here Check out the relevant code snippet ...

Show the updated count retrieved from a specific record in a database table using Ajax technology

I am looking to retrieve the latest ID from a database table and then increase it by 1. I want to display this incremented value in either an Input or Label element of HTML, instead of using tables as most tutorials do. Below is a snippet of my code: inde ...

The equivalent of the $.curCSS method in jQuery version 1.10 is as follows:

While working with a library called mcdropdown from http://www.givainc.com/labs/, I encountered an issue with the $.curCSS method. The latest version of jQuery no longer supports this method and suggests using $().css instead. Following the documentation, ...

What steps can I take to ensure my CSS component remains unaffected by the global CSS styles?

My navbar component is not displaying the styles correctly as intended. I have a Navbar.module.css file to style it, but after using next-auth for social login, only the buttons remain unstyled while everything else gets styled. The code snippet for impor ...

The Google Maps marker is not accurately displaying the designated location

While working on my project, I successfully integrated Google Maps. However, I have encountered a problem: when I search for a specific location, the marker is not displaying at the correct point, but rather somewhere else. The latitude and longitude value ...

The pre tag does not have any effect when added after the onload event

I have been experimenting with a jQuery plugin for drawing arrows, detailed in this article. When using the plugin, this code is transformed: <pre class="arrows-and-boxes"> (Src) > (Target) </pre> into this format: Src --> Target The ...

Using jQuery to fetch LDAP data and return it in JSON format

I am encountering an issue with a returned JSON value. When the LDAP result is valid, the JSON return is also OK but when the result is invalid, the JSON becomes invalid as well. I am using UWamp and I am new to this. Thank you all. PHP code : <?php ...

PHP script integration with WHMCS

I've been attempting to add analytic.php into head.tpl in WHMCS, but I keep encountering an error. Analytic.php location: root/analytic.php Head.tpl location: root/whmcs/template/six/includes/head.tpl I read that WHMCS supports Smarty PHP, so I&apos ...

PHP code exhibiting inconsistent behavior when executed on a WAMP Server

My WAMP Server is set up and running smoothly as I dive into PHP code for a class assignment. The server icon shines bright green, my HTML and PHP files in the www folder are functioning perfectly. I am currently using PHP v7.0.1 on my WAMP setup. However ...