appendchild

Append multiple items in JavaScript

由 混江龙づ霸主 提交于 2019-12-29 04:15:10
问题 I have the following function and I am trying to figure out a better way to append multiple items using appendChild() . When the user clicks on Add, each item should look like this: <li> <input type="checkbox"> <label>Content typed by the user</label> <input type="text"> <button class="edit">Edit</button> <button class="delete">Delete</button> </li> and I have this function to add these elements: function addNewItem(listElement, itemInput) { var listItem = document.createElement("li"); var

Inserting a nested div structure with createDocumentFragment

由 ⅰ亾dé卋堺 提交于 2019-12-29 01:41:49
问题 How do you use createDocumentFragment to create seven nested div elements in one hit? I want to create a container A which contains A1, A2, A3 & A4, and then A2a & A2b within A2. Note: this is a follow-up question to this which explained createDocumentFragment, but not how to nest divs using it. The answer given was as follows (which was helpful as far as it went): var fragment = document.createDocumentFragment(); function u1(tag, id, className){ var tag = document.createElement(tag); tag.id

appendChild + createElement

由 拟墨画扇 提交于 2019-12-28 13:21:31
问题 What's the difference between: var div = document.createElement('div');//output -> [object HTMLDivElement] document.getElementById('container').appendChild(div); and: var div = '<div></div>'; document.getElementById('container').appendChild(div);//output -> <div></div> Shouldn't both be the same? And if not, how do I get the second version to work? 回答1: The latter is simply a string containing HTML while the first is an object. For the first, you need appendChild while for the second, you

How to sort out elements by their value in data- attribute using JS

由 落爺英雄遲暮 提交于 2019-12-28 07:09:47
问题 I need to sort out the elements that are already displayed in ascending order so that they just rearrange. I need to sort them out by the values in their data-val attributes. <div id="a" class="item" data-val="6">Item a</div> <div id="b" class="item" data-val="8">Item b</div> <div id="c" class="item" data-val="2">Item c</div> <div id="d" class="item" data-val="5">Item d</div> <br /> <button onclick="sortOut()">Sort Out</button> I made an example here: http://jsfiddle.net/quatzael/uKnpa/ I

How to sort out elements by their value in data- attribute using JS

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-12-28 07:08:40
问题 I need to sort out the elements that are already displayed in ascending order so that they just rearrange. I need to sort them out by the values in their data-val attributes. <div id="a" class="item" data-val="6">Item a</div> <div id="b" class="item" data-val="8">Item b</div> <div id="c" class="item" data-val="2">Item c</div> <div id="d" class="item" data-val="5">Item d</div> <br /> <button onclick="sortOut()">Sort Out</button> I made an example here: http://jsfiddle.net/quatzael/uKnpa/ I

innerHTML (or other method): append li to ul, with <input/> including attributes

由 浪子不回头ぞ 提交于 2019-12-25 07:06:15
问题 document.getElementById('addplace').addEventListener('click', function() { addplace(); }); function addplace() { var node = document.createElement("li"); // Create a <li> node node.innerHTML = "<input/>" document.getElementById("waypoints").appendChild(node); } <ul id="waypoints"></ul> <input type="submit" id="addplace" /> The above snippet successfully adds an input field to the ul when the button is clicked. However when I add attributes to the input field the submit button no longer works.

Why does appendChild only work when I remove the docType

由 早过忘川 提交于 2019-12-25 04:56:16
问题 When I put any sort of doctype declaration like <!DOCTYPE html > , appendChild does not work.... Why? <form> <script language="javascript"> function function2() { var myElement = document.createElement('<div style="width:600; height:200;background-color:blue;">www.java2s.com</div>'); document.forms[0].appendChild(myElement); } </script> <button onclick="function2();"></button> </form> I'm trying to get data from a popup window's parent opener...is that possible? The data can be a string

appendChild kmz works only in second time when I run a tour (tour is into the same kmz)

由 家住魔仙堡 提交于 2019-12-25 02:15:07
问题 I have a KMZ file for GE plugin. This file have lots of PNG into, and several kml (poligons, lines, placemarks, etc). The function to run this tour is: function loadKmztour(href){ google.earth.fetchKml(ge, kmlURL, function(kmlObject) { if (kmlObject){ ge.getFeatures().appendChild(kmlObject); walkKmlDom(kmlObject, function(context) { if (this.getType() == 'KmlTour') { ge.getTourPlayer().setTour(this); ge.getTourPlayer().play(); } }); }); } It runs well, but only the second time when I run the

appendChild in IE6/IE7 does not work with existing elements

由 社会主义新天地 提交于 2019-12-24 15:27:25
问题 I have a div that needs to be moved from one place to another in the DOM. So at the moment I am doing it like so: flex.utils.get('oPopup_About').appendChild(flex.utils.get('oUpdater_About')); But, IE, being, well, IE, it doesn't work. It works all other browsers, just not in IE. I need to do it this way as the element (div) 'oUpdater_About' needs to be reused as it is populated over and over. So i just need to be able to move the div around the DOM, appendChild will let this happen in all

Storing elements in memory to prevent updating the DOM too often?

由 穿精又带淫゛_ 提交于 2019-12-24 08:08:12
问题 Currently I have a loop that updates the DOM in each iteration; I have learned this is a bad practice & you should update the DOM as little as possible for better speed. So I was wondering how I go about editing the below so I can store all the elements in one element or something & then do a single DOM addition once the loop ends. Here is the loop.. for (var i = spot; i < spot + batchSize && i < cats.options.length; i++) { // Check if the cat is selected if (cats.options[i].selected == true)
订阅 appendchild