53563

Adding to innerHTML correct syntax

Question:

What is the correct syntax if I want to add content to an element using innerHTML. Below is my non working example:

openNewWindow: function(content) { popupWin = window.open(content, 'open_window', 'menubar, toolbar, location, directories, status, scrollbars, resizable, dependent, width=640, height=480, left=0, top=0') }, for (var index in mv.exifImages) { ele.innerHTML += "<p onclick = openNewWindow(mv.exifImages[index]> image" + index + "

"; }

Answer1:

i think it is. variable index has local scope

for (var index in mv.exifImages) { ele.innerHTML += "<p onclick = 'openNewWindow(\"" + mv.exifImages[index] + "\")'> image" + index + "

"; }

Answer2:

Use appendChild:

var myelement = document.getElementById("myelement"); myelement.appendChild( document.createTextNode("Example text inside myelemen") );

This is better that overwriting innerHTML, as it preserves onclick events for example:<br /><a href="https://stackoverflow.com/questions/595808/is-it-possible-to-append-to-innerhtml-without-destroying-descendants-onclick-fu" rel="nofollow">Is it possible to append to innerHTML without destroying descendants' event listeners?</a>

Answer3:

innerHTML is not your problem, your code is lacking context.

openNewWindow: function(content) { popupWin = window.open(content, 'open_window', 'menubar, toolbar, location, directories, status, scrollbars, resizable, dependent, width=640, height=480, left=0, top=0'); // call to window.open ended here }, // judging by the definition of openNewWindow and the comma above, // we are inside an object definition! // you cannot embed a for loop inside an object definition!!! for (var index in mv.exifImages) { ele.innerHTML += "<p onclick = openNewWindow(mv.exifImages[index]> image" + index + "

"; }

Put your for loop somewhere sensible, like inside a function, or actually show us the error you are getting.

Recommend

  • Bootstrap columns cause horizontal scrollbar
  • Pass this to addEventListener() as parameter
  • Two gridView with one scroll in android
  • Fixed position layer (div) in relation to its parent div (with overflow:auto)
  • Create an multidimensional array from a database table
  • JavaScript Event Delegation - Behavior
  • too many characters in character literal in asp.net c#
  • Jsoup - How to extract every elements
  • jQuery UI Dialog resize helper
  • Setting UIToolbar background image with iOS5.1
  • Git subtree post hook
  • How to create a data template dependent on an XML Attribute?
  • jQueryUI dialog replacement for confirm?
  • How do I recognize a line break with a switch case that evaluates a char in Java?
  • Jquery resizable reposition handle after scroll
  • Jquery Knockout: ko.computed() vs classic function?
  • Can't remove headers after they are sent
  • blade.php method outputting it's result to the form
  • D3 get axis values on zoom event
  • How to use JavaScript to determine whether a file exists in a directory?
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Disable Enter in editText android
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • Can Jackson SerializationFeature be overridden per field or class?
  • How to set/get protobuf's extension field in Go?
  • How to check if every primary key value is being referenced as foreign key in another table
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • How to show dropdown in excel using jrxml (jasper api)?
  • Android Studio and gradle
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • python regex in pyparsing
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • python draw pie shapes with colour filled
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal