How to add inline CSS to dynamically created elements with Javascript?

Question

I would like to add inline CSS to the left and right messages that are generated, for example the left text is red and the right text is blue. (I know it's best to style in the CSS, but I'm testing something else). So I will have this HTML:

<ul class="messages">
  <li class="message left appeared">
    <div class="text_wrapper">
      <p class="text" style="color:red;">blabla</p>
    </div>
  </li>
  <li class="message right appeared">
    <div class="text_wrapper">
      <p class="text" style="color:blue;">blabla</p>
    </div>
  </li>
</ul>

Please see the code as reference for the functionality. Many thanks for your help.

 (function() { var Message; Message = function({ text: text1, message_side: message_side1 }) { this.text = text1; this.message_side = message_side1; this.draw = () => { var $message; $message = $($('.message_template').clone().html()); $message.addClass(this.message_side).find('.text').html(this.text); $('.messages').append($message); return setTimeout(function() { return $message.addClass('appeared'); }, 0); }; return this; }; $(function() { var getMessageText, message_side, sendMessage; message_side = 'right'; getMessageText = function() { var $message_input; $message_input = $('.message_input'); return $message_input.val(); }; sendMessage = function(text) { var $messages, message; if (text.trim() === '') { return; } $('.message_input').val(''); $messages = $('.messages'); message_side = message_side === 'left' ? 'right' : 'left'; message = new Message({text, message_side}); message.draw(); return $messages.animate({ scrollTop: $messages.prop('scrollHeight') }, 300); }; $('.send_message').click(function(e) { return sendMessage(getMessageText()); }); $('.message_input').keyup(function(e) { if (e.which === 13) { // enter key return sendMessage(getMessageText()); } }); }); }).call(this);

 * { box-sizing: border-box; } .chat_window { position: absolute; width: calc(100% - 20px); max-width: 600px; height: 440px; background-color: #fff; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); border: 1px solid #ddd; overflow: hidden; } .messages { position: relative; list-style: none; padding: 20px 10px 0 10px; margin: 0; height: 347px; overflow: scroll; } .messages .message { clear: both; overflow: hidden; margin-bottom: 20px; transition: all 0.5s linear; opacity: 0; } .messages .message.left .text_wrapper { background-color: #ddd; margin-left: 20px; } .messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before { right: 100%; border-right-color: #ddd; } .messages .message.left .text, .messages .message.right .text { color: #000; margin: 0; } .messages .message.right .text_wrapper { background-color: #ddd; margin-right: 20px; float: right; } .messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before { left: 100%; border-left-color: #ddd; } .messages .message.appeared { opacity: 1; } .messages .message .text_wrapper { display: inline-block; padding: 20px; width: calc(100% - 85px); min-width: 100px; position: relative; } .messages .message .text_wrapper::after, .messages .message .text_wrapper:before { top: 18px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .messages .message .text_wrapper::after { border-width: 13px; margin-top: 0px; } .messages .message .text_wrapper::before { border-width: 15px; margin-top: -2px; } .messages .message .text_wrapper .text { font-size: 18px; font-weight: 300; } .bottom_wrapper { position: relative; width: 100%; background-color: #fff; padding: 20px 20px; position: absolute; bottom: 0; } .bottom_wrapper .message_input_wrapper { display: inline-block; height: 50px; border: 1px solid #bcbdc0; width: calc(100% - 160px); position: relative; padding: 0 20px; } .bottom_wrapper .message_input_wrapper .message_input { border: none; height: 100%; box-sizing: border-box; width: calc(100% - 40px); position: absolute; outline-width: 0; color: gray; } .bottom_wrapper .send_message { width: 140px; height: 50px; display: inline-block; background-color: #ddd; border: 2px solid #ddd; color: #000; cursor: pointer; transition: all 0.2s linear; text-align: center; float: right; } .bottom_wrapper .send_message:hover { color: #000; background-color: #fff; } .bottom_wrapper .send_message .text { font-size: 18px; font-weight: 300; display: inline-block; line-height: 48px; } .message_template { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="chat_window"> <ul class="messages"></ul> <div class="bottom_wrapper clearfix"> <div class="message_input_wrapper"> <input class="message_input" placeholder="Type here..." /> </div> <div class="send_message"> <div class="icon"></div> <div class="text"> Send </div> </div> </div> </div> <div class="message_template"> <li class="message"> <div class="text_wrapper"> <p class="text"></p> </div> </li> </div>

Answer 1

You can also add:

$(".left").css("color", "yellow");
$(".right").css("color", "blue");

Answer 2

$("li.message.left > div.text_wrapper > p").css('color', 'red');
$("li.message.right > div.text_wrapper > p").css('color', 'blue');

Answer 3

Using jQuery you can add inline style to an element

$(".left").attr("style","whatever");
$(".right").attr("style","whatever");

Answer 4

You can use the classList of every HTML component. Simply, select the DOM element with class left (or right ) and use the add method to assign whatever class:

var elementLeft = $('.left')
elementLeft.classList.add('yourClass')

You can also use the methods remove to remove any class, or toggle to toggle some class..

elementLeft.classList.remove('yourClass')
elementLeft.classList.toggle('yourClass')

The Element.classList contains more examples. This solution works without jQuery or others javascript library, but use the standard API.