Hello everybody,      // Create element const li  = document.createElement('li');  // Add class li.className = 'collection-item';   // Add attribute li.setAttribute('title', 'New Item');  // Create text node and append li.appendChild(document.createTextNode('Hello World'));  // Create new link element const link = document.createElement('a'); // Add classes link.className = 'delete-item secondary-content'; // Add icon html link.innerHTML = '&lt;i class="fa fa-remove"&gt;&lt;/i&gt;';  // Append link into li li.appendChild(link);  // Append li as child to ul  document.querySelectorAll(".btn")[0].addEventListener("click", function(){   document.querySelector('ul.collection').appendChild(li); })   This the the code I use to append an element which i created to an unordered list. It works fine when I click on the button the first time, but then nothing more happens. I expected that a new element would be added, whenever i click the button. Why does it only append the element one time? Can you guys help me?
112
I have a bit of code where I am looping through all the select boxes on a page and binding a .hover event to them to do a bit of twiddling with their width on mouse on/off.  This happens on page ready and works just fine.  The problem I have is that any select boxes I add via Ajax or DOM after the initial loop won't have the event bound.  I have found this plugin (), but before I add another 5k to my pages with a plugin, I want to see if anyone knows a way to do this, either with jQuery directly or by another option.
9926
What is the best method in jQuery to add an additional row to a table as the last row?  Is this acceptable?  $('#myTable').append('&lt;tr&gt;&lt;td&gt;my data&lt;/td&gt;&lt;td&gt;more data&lt;/td&gt;&lt;/tr&gt;');   Are there limitations to what you can add to a table like this (such as inputs, selects, number of rows)?
105678
My code looks like this:  &lt;ul id="ulList"&gt;   &lt;li class="listClass" id="id1"&gt;&lt;a href="http://link1"&gt;Link 1&lt;/a&gt;&lt;/li&gt;   &lt;li class="listClass" id="id2"&gt;&lt;a href="http://link2"&gt;Link 2&lt;/a&gt;&lt;/li&gt;   &lt;li class="listClass" id="id3"&gt;&lt;a href="http://link3"&gt;Link 3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;   Now I like to get the following:  All links as an array  All ids of li as an array  Can someone help me please?
35183
I'm pulling items out of the DOM with jQuery and want to set a property on an object using the id of the DOM element.   Example  const obj = {}  jQuery(itemsFromDom).each(function() {   const element = jQuery(this)   const name = element.attr('id')   const value = element.attr('value')    // Here is the problem   obj.name = value })   If itemsFromDom includes an element with an id of "myId", I want obj to have a property named "myId". The above gives me name.  How do I name a property of an object using a variable using JavaScript?
59846
In the following example code, I attach an onclick event handler to the span containing the text "foo". The handler is an anonymous function that pops up an alert().  However, if I assign to the parent node's innerHTML, this onclick event handler gets destroyed - clicking "foo" fails to pop up the alert box.  Is this fixable?  &lt;html&gt;  &lt;head&gt;  &lt;script type="text/javascript"&gt;    function start () {     myspan = document.getElementById("myspan");     myspan.onclick = function() { alert ("hi"); };      mydiv = document.getElementById("mydiv");     mydiv.innerHTML += "bar";   }   &lt;/script&gt;  &lt;/head&gt;   &lt;body onload="start()"&gt;    &lt;div id="mydiv" style="border: solid red 2px"&gt;      &lt;span id="myspan"&gt;foo&lt;/span&gt;    &lt;/div&gt;  &lt;/body&gt;  &lt;/html&gt;
70627
Im on a lightning community, i have a lightning component and i want to open another component with this code:  navigateToMyComponent : function(component, event, helper) {     console.log('1');     var evt = $A.get("e.force:navigateToComponent");     console.log('2');     evt.setParams({         componentDef : "c:CompetenciaComponent"     });     console.log('3');     evt.fire();     console.log('4'); }   this its the console log:   NOTHINGS HAPPEND AND I DONT KNOW WHY
70176
After reading  thread, it appears to me that creating a new element is a game of chance some sort of an art. It also appeared to me that the higher you go, the harder it is to make an element.   Anyways, What's the use of creating new elements? Has there been any research on the practical applications of these new elements? Is there a limit on how  massive an atom can get?   I haven't done any research about this because it just popped up in my mind.
45954
I'm trying to add an extra class name to all the blocks by extending them. Documentation:    I'm using blocks.BlockEdit to modify the edit component. I want to add a custom class name.  So far I have this  const withClass = createHigherOrderComponent( ( BlockListBlock ) =&gt; {     return ( props ) =&gt; {         let wrapperProps = props.wrapperProps;         wrapperProps = {             ...wrapperProps,             className: 'my-custom-class',         };          return &lt;BlockListBlock { ...props } wrapperProps={ wrapperProps } /&gt;;     }; }, 'withClass' );   It's working by adding the custom class to the wrapper but it is overwriting the default block class. Is it possible to append to the current classes without overriding?
119899
I am refering  to render dynamic component in LWC. But it is giving error createElement is not defined.  Have any one idea how to render dynamic component. Alternative of createComponent method of Aura framework.
44255
I am trying to insert a chunk of HTML into a div. I want to see if plain JavaScript way is faster than using jQuery. Unfortunately, I forgot how to do it the 'old' way. :P  var test2 = function(){     var cb = function(html){         var t1 = document.getElementById("test2");         var d = document.createElement("div");         d.id ="oiio";         d.innerHtml = html;         t1.appendChild(d);         console.timeEnd("load data with javascript");     };     console.time("load data with javascript");     $.get("test1.html", cb); }   what am i doing wrong here guys?  edit:  Someone asked which is faster, jquery or plain js so i wrote up a test:   plain js is 10% faster
112886
I am building a menu component.  One menu-item is a sub-menu with list of opportunities, this list is created with aura:iteration over a list of opportunities.  When selecting a menu or a sub-menu, I need to make it look selected (change css attribute). For this to happen, I need to find this menu item in my controller.  If I add id attribute to my item markup and use the event attribute on my controller (event.currentTarget.id), I can catch the item itself and change it's style, this works:  MARKUP       &lt;aura:iteration items="{!v.opportunities}" var="opp"&gt;     &lt;li class="slds-dropdown__item" role="presentation"&gt;         &lt;a href="javascript:void(0);" role="menuitem" tabindex="-1" id="{!opp.Id}" onclick="{!c.openItemFromMenu}"&gt;             &lt;span class="slds-truncate" title="{!opp.Name}"&gt;{!opp.Name}&lt;/span&gt;         &lt;/a&gt;     &lt;/li&gt; &lt;/aura:iteration&gt;   CONTROLLER    openItemFromMenu: function(component, event, helper) {     // get the id     var oppId = event.currentTarget.id;     // choose it (select menu)     var selectedItemNew = component.find(oppId);     selectedItemNew.style = "background: rgb(216, 237, 255);" }   PROBLEM  when I try to change the menu selected not from the click of the item (event that is triggered from another page) - I have added an event handler to change the menu item, and I send the opportunity id through that event. Then (after adding aura:id to my item, I am trying to find this menu item of this oppId with component.find in my controller - this does not work:  CHANGED MARKUP  add: &lt;aura:handler name="eventSelectMenuItem" event="c:myEvent" action="{!c.openItemFromMenu}" /&gt; change: &lt;a href="javascript:void(0);" role="menuitem" tabindex="-1" id="{!opp.Id}" onclick="{!c.openItemFromMenu}" aura:id="{!opp.Id}"&gt;   CHANGED CONTROLLER  openItemFromMenu: function(component, event, helper) {     // get the id from the event     var oppId = event.getParam("recordId");     // choose it (select menu)     var selectedItemNew = component.find(oppId);     selectedItemNew.style = "background: rgb(216, 237, 255);" }   QUESTION  Does component.find for aura:id within an aura:iteration suppose to work?  If not - is there a workaround?  If it does suppose to work - what am I doing wrong?
24310
I'm trying to get:  document.createElement('div')  //=&gt; true {tagName: 'foobar something'}  //=&gt; false   In my own scripts, I used to just use this since I never needed tagName as a property:  if (!object.tagName) throw ...;   So for the second object, I came up with the following as a quick solution -- which mostly works. ;)  The problem is, it depends on browsers enforcing read-only properties, which not all do.  function isDOM(obj) {   var tag = obj.tagName;   try {     obj.tagName = '';  // Read-only for DOM, should throw exception     obj.tagName = tag; // Restore for normal objects     return false;   } catch (e) {     return true;   } }   Is there a good substitute?
98687
If the user selects an option in a dropdown box, there must be added a label and a textbox. Using appendChild, these elements get added to the end of the container.  var newFreeformLabel = document.createElement('label'); newFreeformLabel.innerHTML = 'Omschrijving:';  var newFreeformField = document.createElement('input'); newFreeformField.className = 'textfield'; newFreeformField.name = 'factuur_orderregel[]';  var newFreeformSpacer = document.createElement('div'); newFreeformSpacer.className = 'spacer';  container.appendChild(newFreeformLabel); container.appendChild(newFreeformField); container.appendChild(newFreeformSpacer);   The issue is that these elements should be inserted at the beginning of container, not at the end.  Is there a solution to this in PrototypeJS?
7024
As title says, How do I assign dynamic Ids for ui:inputDate elements inside aura:iteration?  Here is the reproducible version of the problem I am facing:  HelloWorldApp.app  &lt;aura:application &gt;     &lt;c:inputDateExample /&gt; &lt;/aura:application&gt;   inputDateExample.cmp  &lt;aura:component &gt;     &lt;aura:handler name="init" value="{!this}" action="{!c.doInit}"/&gt;     &lt;aura:attribute name="datesList" type="List" /&gt;     &lt;table&gt;         &lt;aura:iteration items="{!v.datesList}" var="dateItem"&gt;             &lt;tr&gt;                 &lt;ui:inputDate aura:id="date-id"                                value="{!dateItem}"                                displayDatePicker="true"                               blur="{!c.fldChanged}"/&gt;             &lt;/tr&gt;         &lt;/aura:iteration&gt;     &lt;/table&gt; &lt;/aura:component&gt;   inputDateExampleController.js  ({     fldChanged : function(component, event, helper) {         console.log('Value changed');         //How do I find from which date element, event is fired??         //The below method finds both date elements because the Id is not unique         var dateComponent = component.find('date-id');         console.log(dateComponent);         console.log(dateComponent[0].get("v.value"));     },     doInit : function(component,event,helper){         var datesArray = [];         datesArray.push("2017-01-01");         datesArray.push("2017-01-31");         component.set("v.datesList",datesArray);     } })   This produces the below output and I need to find which element user is clicking on??    Notes:   I can assign unique Id for tr element but not sure how to use that inside component.find() method. I can assign dynamic id for plain input tags but there is too much markup involved for making these similar to lightning date element. I tried giving html5 data attributes for ui:inputDate but it doesn' accept.   Any workarounds or anything I am missing here?
82255
I'm making a page which has some interaction provided by javascript. Just as an example: links which send an AJAX request to get the content of articles and then display that data in a div. Obviously in this example, I need each link to store an extra bit of information: the id of the article. The way I've been handling it in case was to put that information in the href link this:  &lt;a class="article" href="#5"&gt;   I then use jQuery to find the a.article elements and attach the appropriate event handler. (don't get too hung up on the usability or semantics here, it's just an example)  Anyway, this method works, but it  a bit, and isn't extensible at all (what happens if the click function has more than one parameter? what if some of those parameters are optional?)  The immediately obvious answer was to use attributes on the element. I mean, that's what they're for, right? (Kind of).  &lt;a articleid="5" href="link/for/non-js-users.html"&gt;   In  I asked if this method was valid, and it turns out that short of defining my own DTD (I don't), then no, it's not valid or reliable. A common response was to put the data into the class attribute (though that might have been because of my poorly-chosen example), but to me, this smells even more. Yes it's technically valid, but it's not a great solution.  Another method I'd used in the past was to actually generate some JS and insert it into the page in a &lt;script&gt; tag, creating a struct which would associate with the object.  var myData = {     link0 : {         articleId : 5,         target : '#showMessage'         // etc...     },     link1 : {         articleId : 13     } };  &lt;a href="..." id="link0"&gt;   But this can be a real pain in butt to maintain and is generally just very messy.  So, to get to the question, how do you store arbitrary pieces of information for HTML tags?
6562
Consider the following HTML:  &lt;div class="foo" id="obj"&gt;    I should be changed red    &lt;div class="bar" style="color:black;"&gt;       I should not be changed red.       &lt;div class="foo"&gt;I should be changed red.&lt;/div&gt;    &lt;/div&gt; &lt;/div&gt;   Given a DOM element obj and an expression, how do I go about selecting any children and possibly obj?  I'm looking for something similar to "select descendants" but also including the parent, if it matches the expression.  var obj = $("#obj")[0];  //wrong, may include siblings of 'obj' $(".foo", $(obj).parent()).css("color", "red");  //wrong -- excludes 'obj' $(".foo", obj).css("color", "red");  //correct way, but it's annoying var matches = $(".foo", obj); if ($(obj).is(".foo")) matches = matches.add(obj); matches.css("color", "red");   Is there a more elegant solution to this?
87646
Salesforce has functions that do a lot of basic web app functionality for you, called Event Reference. They can be found here   On the editRecord Event Reference, found here   essentaily, I create a   &lt;ui:button label="Edit" press="{!c.editRecord}"/&gt;   on my component, reference the attribute on the page and add the function from the docs in the controller  editRecord : function(component, event, helper) {     var editRecordEvent = $A.get("e.force:editRecord");      console.log("record id is: " + component.get("v.item.Id"));     console.log("editRecordEvent value is: " + editRecordEvent);      editRecordEvent.setParams({         "recordId": component.get("v.item.Id")     });      editRecordEvent.fire(); }   correct?  Here is the odd thing. From the console.logs, I get the record id, but the editRecordEvent returns undefined. What is going on? Is there something I need to reference in my component to use Event Reference?