How to apply styling to elements created with .insertAdjacentHtml method

» javascript » How to apply styling to elements created with .insertAdjacentHtml method

By : user3099531

Date : January 11 2021, 03:32 PM

Any of those help I can't apply styling to elements created with .insertAdjacentHTML. , Use insertAdjacentElement and insert the element, not its content.

code :

(function() {
  const newTimeSpan = document.createElement('span');
  const date = new Date();
  const currentTime = `${new Date().getHours()} : ${new Date().getMinutes()} : ${new Date().getSeconds()}`
  const newTimeSpanText = document.createTextNode(currentTime);
  newTimeSpan.appendChild(newTimeSpanText);
  newTimeSpan.style.cssText = "border:solid 1px black;padding:2px;margin-right:10px;";
  const liItem = document.querySelector('li');
  liItem.insertAdjacentElement('afterbegin', newTimeSpan);
})()

<div class="list-box">
  <ul class="list">
    <li class="item">item 1</li>
    <li class="item">item 2</li>
    <li class="item">item 3</li>
    <li class="item">item 4</li>
  </ul>
</div>

Share :

Apply a plugin's method to dynamically created elements?

By : arivarton

Date : March 29 2020, 07:55 AM

hope this fix your issue To answer my own question... I used the jquery.livequery plugin to do the following:

code :

$('input[type="tel"]').livequery(function() {
  $(this).mask("(999) 999-9?999");
});

How to apply CSS styling to elements created by jquery's append()?

By : user3420472

Date : March 29 2020, 07:55 AM

seems to work fine You need to put a space in between 2 input boxes when you append them.
Take a look at this working demo it is fine now

Assigning unique ID for HTML elements created with insertAdjacentHTML

By : user3223022

Date : March 29 2020, 07:55 AM

To fix this issue Put the elementCount Variable outside the handleClick function, otherwise it can't be accessed from anywhere and will always be 0 when you call handleClick. Additionally you need to increment it first and then append it to the insert string.

code :

let elementCount = 0;

function handleClick() {
     elementCount++;
     let inputNode = document.querySelector('.input-field');
     let uEl = document.querySelector('.unordered-list');
     uEl.insertAdjacentHTML(
        'afterbegin',
        `<div id="list-item-wrapper ${elementCount}">
        <input type="checkbox" class="list-input" name=${inputNode.value}>
            <label for="list-input">
                ${inputNode.value}
            </label>
        </div>`
     );

jQuery; apply styling on classes created from the values of dynamically created variables

By : user3642644

Date : March 29 2020, 07:55 AM

Hope that helps You can do this using selectors with document mouseover/mouseout events. Just use "input" and "message" as your classes and use the data attribute to connect inputs to messages.
PHP:

code :

<?php 
    for($i=1; $i<10; $i++)
    {
        echo '<span class="input" data-anchor="'.$i.'">This is input '.$i.'</span>';
        echo '<span class="message" data-anchor="'.$i.'" style="display:none">This is message '.$i.'</span><br>';
    }
?>

$(document).on('mouseover', '.input', function(){
    var anchor = $(this).data('anchor');
    $('.message[data-anchor="'+anchor+'"]').show();
});

$(document).on('mouseout', '.input', function(){
    var anchor = $(this).data('anchor');
    $('.message[data-anchor="'+anchor+'"]').hide();
});